angularjs基础用法

2017-03-20

学会用Angular构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上
参考资料 http://www.runoob.com/angularjs/angularjs-tutorial.html
Angular directive 实例详解 https://segmentfault.com/a/1190000005851663

AngularJS ng-app 指令

ng-app 指令用于告诉 AngularJS 应用当前这个元素是根元素。
所有 AngularJS 应用都必须要要一个根元素。

HTML 文档中只允许有一个 ng-app 指令，如果有多个 ng-app 指令，则只有第一个会被使用

<!DOCTYPE html>
<html ng-app="singlePage" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

AngularJS ng-controller 自定义控制器

<div ng-app="myApp" ng-controller="myCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text" ng-model="lastName"><br>
<br>
姓名: {{firstName + " " + lastName}}
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});
</script>

angular.module(‘’,[]) 参数的意思

定义一个module需要两个参数，第一个作为module的名字，第二个则是指出这个module都依赖哪些别的modules

1 2	//angular.module('moduleName',[依赖moduleName]) angular.module('PMC.Directive',["PMC.Controller"])

模块之间的依赖和调用

//index.js
//页面加载路由 然后依赖调用 PMC.Directive
angular.module("myApp",["ngRoute","PMC.Directive"])
.config(function($routeProvider){
    $routeProvider
           .when("/performanceView",{
               templateUrl:'pmc/html/templates/views/performanceView.html'
           })
    });

//PMC.Directive自定义指令模块依赖调用 PMC.Controller
angular.module('PMC.Directive',["PMC.Controller"])
.directive("pageHeader",function(){ //index,jsp的 <page-header>
	return{
		restrict:'ECMA',
		templateUrl:'pmc/html/templates/frameTemplate/headerTemplate.html',
		replace:true,
		compile:function(tElements,tAttrs){
			return {
				pre:function(scope,iElements,iAttrs){

				},
				post:function(scope,iElements,iAttrs,$location){

				}
			};
		}
	};
})