说明：本案例将教会你怎么注册module，以及绑定controller，注册component，注册factory，service以及provider.
1. 创建一个模块以及注册控制器
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController as ctrl" >
msg:{{ctrl.msg}}
</div>
<script type="text/javascript" >
angular.module("myApp", []).controller("myController", function($scope) {
this.msg = "hello, myApp is created by angular";
});
</script>
</body>
</html>
说明：这里用到了module以及controller。
2. 注册组件并传参到组件
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController as ctrl" >
msg:{{ctrl.msg}}
<my-component msg="ctrl.msg"></my-componet1>
</div>
<script type="text/javascript" >
angular.module("myApp", []).controller("myController", function($scope) {
this.msg = "hello, myApp is created by angular";
});
angular.module("myApp").component("myComponent", {
template: `
myComponent1:{{$ctrl.msg}},<br/>
`,
controller: ['$scope', function(){}],
bindings: {
msg: "<"
}
});
</script>
</body>
</html>
说明：这里用到了component组件注册并调用。
3. 工厂服务创建并使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController as ctrl" >
msg:{{ctrl.msg}}
<br/>
<my-component msg="ctrl.msg"></my-componet1>
</div>
<script type="text/javascript" >
angular.module("myApp", []).factory("MyFactory", [function() {
return {
text: "I am factory intance"
};
}]);
angular.module("myApp").controller("myController", function($scope, MyFactory) {
this.msg = MyFactory.text;
});
</script>
</body>
</html>
4. service服务创建并使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController1 as ctrl" >
msg:{{ctrl.msg}}
</div>
<div ng-controller="myController2 as ctrl" >
msg:{{ctrl.msg}}
</div>
<script type="text/javascript" >
angular.module("myApp", []).service("MyService", function() {
this.text = "I am service instance";
});
angular.module("myApp").controller("myController1", function($scope, MyService) {
this.msg = MyService.text;
MyService.text = "changed by myController1";
});
angular.module("myApp").controller("myController2", function($scope, MyService) {
this.msg = MyService.text;
});
</script>
</body>
</html>
可以看出，在myController1中改变了text的值，在myController2已经体现出来了。
5.provider的注册并使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myController1 as ctrl" >
msg:{{ctrl.msg}}
</div>
<div ng-controller="myController2 as ctrl" >
msg:{{ctrl.msg}}
</div>
<script type="text/javascript" >
angular.module("myApp", []).provider("MyProvider", function() {
this.text = "I am provider instance";
this.$get = function() {
return this;
}
});
angular.module("myApp").config(function(MyProviderProvider) {
MyProviderProvider.text += " changed";
});
angular.module("myApp").controller("myController1", function($scope, MyProvider) {
this.msg = MyProvider.text;
MyProvider.text = "changed by myController1";
});
angular.module("myApp").controller("myController2", function($scope, MyProvider) {
this.msg = MyProvider.text;
});
</script>
</body>
</html>
5.directive的使用
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyController as ctrl">
<p >{{msg}}</p>
<my-directive ></my-directive>
</div>
<script type="text/javascript" >
var app = angular.module("myApp", []);
app.controller("MyController", function($scope) {
$scope.msg = "I am a controller";
$scope.$on("update", function() {
$scope.msg += " updated";
});
});
app.directive("myDirective", function($compile) {
return {
controller: function($scope) {
$scope.clickButton = function() {
console.log("I am clicked");
$scope.$emit("update", {});
}
},
link: function($scope, el, attrs) {
el.html(`
<div>directive</div>
<hr/>
<button ng-click="clickButton($event)">更新父controller.msg</button>
`);
$compile(el.contents())($scope);
}
}
});
</script>
</body>
</html>
说明：上面代码实现的是动态生成html并且编译html为正常的元素以及绑定事件。
