AngularJS的模块化实现

1
2
3

<div ng-sctroller='helloModule'>
<p>{{greeeing.text}},Angular</p>
</div>

//定义一个模块
var helloModule = angular.module('helloAngular', []);//创建个匿名函数
//创建 controller 控制器 $scope表示告诉angular把$scope注入到里边
helloModule.controller('helloNgCtrl',['$scope',function($scope){
    $scope.greeting = {
        text:'hello'
    }
}])

一个完整的项目

模块之间的依赖

比如下边：

1
2
3

var bookStoreApp = angular.module('bookStoreApp',[
'ngRoute','ngAnimate','bookStoreCtrls','bookStoreFilters','bookSXtoreServices','bookStoreDirectives'
])

然后再HTML中作为启动点开始引用：

1	<html ng-app="bookStoreApp">

指令系统

<html ng-app='MyModule'>
    <body>
        //定义一个自定义标签 浏览器不识
        <hello></hello>
    </body>
</html>

js代码

var MyModule = angular.module('MyModule', []);

MyModule.directive('hello',function(){
    return {
        restrict:'E',//模式为属性模式
        template:'<div>Hi everyone !</div>',//模板
        replace:true//表示可ui替换HTML相对应的标签
    }
}])