1、引入angular：<script src="lib/js/angular.1.4.8.js"></script>
<body ng-app="mc">（ng-app指令标记了AngularJS脚本的作用域并引导应用）
2、
var mc = angular.module('mc', [
'ui.router',
'ui.bootstrap',
'ui.colorpicker',
'ngFileUpload',
'ng.ueditor'
]);
module是angular中重要的模块组织方式，angular.module(name[, requires][, configFn]);
参数：name（string）：模块名称
requires（string 数组）：依赖的模块组，可以为空数组[]；指定 requires 将产生新的模块，否则获取已有模块
configFn（Function）： 模块的配置函数
返回：（Module）：模块对象
3、
mc.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("main", "/login");
$urlRouterProvider.otherwise("/login");
$stateProvider.state("login", {
url: "/login",
templateUrl: "htmls/main/login.html",
}).state("sysnotice", {
url: "/sysnotice",
params: {"param" : null},
templateUrl: "htmls/main/sysnotice.html",
})...
}
]);
config(configFn)：在模块装载过程中执行指定的函数。
4、路由（ui-router可用于多视图）
1）引入angular-ui-router：<script src="lib/js/angular-ui-router.min.js"></script>
2）包含模块：angular.module('mc', ['ui.router'...]);
3）使用 ui-view 指令：<div ui-view></div>（该 div 内的 HTML 内容会根据路由的变化而变化）
4）定义路由规则
a）$urlRouterProvider.when("main", "/login");
$urlRouterProvider.otherwise("/login");
$urlRouterProvider.when(what,handler)：
参数：what：需要重定向的传入路径；handler：重定向的路径/处理程序。
$urlRouterProvider.otherwise(rule)：定义一个当请求的路径是无效路径时跳转的路径。
参数：rule：你想重定向的url路径或一个返回的网址路径的规则函数。
b）$stateProvider：处理路由状态的服务
$stateProvider.state("login", {
url: "/login",
templateUrl: "htmls/main/login.html",
}).state("sysnotice", {
url: "/sysnotice",
params: {"param" : null},
templateUrl: "htmls/main/sysnotice.html",
})
$stateProvider.state(name,stateConfig)：注册一个状态，并给定其配置。
参数：name：状态的名称。
stateConfig：状态配置对象。配置具有以下各项属性：
templateUrl：string/function，模板路径的字符串，或者返回模板路径字符串的函数。
url：string，当前状态的对应url...
5、控制器
<!--login.html-->
<div ng-controller="LoginCtrl">
<form ng-submit="login()">
<input type="text" placeholder="用户名" ng-model="username" />
<input type="password" placeholder="密码" ng-model="password" /><input type="submit" value="登录"/>
</form>
</div>
//login.js
mc.controller('LoginCtrl', ['$rootScope', '$scope', '$http','$location',
function($rootScope, $scope, $http,$location) {
$scope.login = function() {
var data = {
"UserId":$scope.username,
"Password":$scope.password
};
$http.post('/admin/login.do',
data).success(function(data) {
if (!$rootScope.isSuccess(data.ReturnCode)) {
$scope.mcErr("sm", data.ReturnMsg);
} else {
$rootScope.PUser = data.PUser;
$location.path("main");
}
}).error(function(data) {
$scope.mcErr("sm", "error");
});
}
}]);
//mc.js
mc.run(['$rootScope', '$modal', '$state',
function($rootScope, $modal, $state) {
$rootScope.$state = $state; // ui-router路由状态控制
$rootScope.mcErr = function(size, errormsg) { // 错误信息弹框
var modalInstance = $modal.open({
...
});
...
};
]);
AngularJS 应用组成如下（MVC）：View(视图), 即 HTML；Model(模型), 当前视图中可用的数据；Controller(控制器), 即 JavaScript 函数，可以添加或修改属性。
AngularJS 应用程序被控制器控制，ng-controller 指令定义了应用程序控制器。
内置指令：ng-model 指令绑定了 HTML 表单元素到 scope 变量中；ng-submit 指令用于在表单提交后执行指定函数...
mc.run执行指定函数在依赖注入容器产生后。
6、Scope作用域：应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带，有可用的方法和属性
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递。当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性和方法。scope 有作用域。
所有的应用都有一个 $rootScope，它可以作用在 ng-app 指令包含的所有 HTML 元素中，是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在各个 controller 中使用。
7、基于angular来实现的一个bootstrap模态框。详见https://my.oschina.net/codingBingo/blog/715869
1）引入ui-bootstrap-tpls：<script src="lib/js/ui-bootstrap-tpls-0.13.0.min.js"></script>
2）包含模块：angular.module('mc', ['ui.bootstrap'...]);
3）引入$modal：mc.run([... '$modal'...,function(...$modal...){}]);
8、$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据。
$location 服务解析地址栏中的URL，类似 window.location 对象