說明：本案例將教會你怎么注冊module赔桌，以及綁定controller供炎，注冊component，注冊factory疾党，service以及provider.
1. 創(chuàng)建一個模塊以及注冊控制器
<!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組件注冊并調(diào)用。
3. 工廠服務(wù)創(chuàng)建并使用
<!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服務(wù)創(chuàng)建并使用
<!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已經(jīng)體現(xiàn)出來了。
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>
說明：上面代碼實現(xiàn)的是動態(tài)生成html并且編譯html為正常的元素以及綁定事件茧泪。
