12最外层的div里面写ng-app=""
ng-model 绑定输入的数据如input ,比如<input type="text" ng-model="data"><h1>{{data}}</h1>
ng-bind 绑定的数据会成为innerHtml，比如<div ng-bind="data">这里显示的内容就是打他里面的数据。（类似于vue.js
的v-html）</div>
ng-repeat 循环，会重复一个 HTML 元素(类似vue的v-for)
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以- 分割,runoob-directive
页面：
< runoob-directive>< /runoob-directive>
js：
var app=angular("myapp",[]);
app.directive("runoobDirective",function(){
return {
restrict:"A", //restrict限制指令。限制以特定的方式来调用。restrict的取值：A属性、E元素、C类名、M注释
template:"<h1>指定的指令</h1>"
}
})
ng-controller指令定义了应用程序控制器。
<div ng-app="myApp" ng-controller="personCtrl"> 名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}} </div>
var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) { $scope.firstName = "John"; $scope.lastName = "Doe"; $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } });
或者是把controller写在一个单独的文件里引进来。<script src="personController.js"></script>
然后把那些内容写在js里面
angular.module('myApp',[]).controller('namesCtrl',function($scope){ $scope.names =[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'} ]; });
< div ng-app= "myApp" ng-controller= "namesCtrl" > < ul > < li ng-repeat= "x in names" > {{ x.name + ', ' + x.country }} < /li > < /ul > < /div > < script src= "namesController.js" > < /script >
angular的路由
通过不同的地址访问不同的页面
需要引入<script src="angular.route.js"></script>
页面
<div ng-view></div> 该内容会根据路由的变化而变化
var app=angular.model("myapp",['ngRoute']);
myapp.config(["$routeProvider",function($routeProvider){
$routeProvider
.when(" /home", { //第一个参数为URL 或者 URL 正则规则
template:'这是首页'}) //第二个参数为路由配置对象。
.when(" /s1", {
template:'这是第一页'})
]})
$routeProvider.when(url, { template: string, //如果我们只是想在ng-view里面添加一些简单的内容，直接可以把那个html的内容写在这里 templateUrl: string,//在ng-view里面添加html文件 controller: string, function 或 array, // 当前的模板执行的controller函数，生成了新的scope controllerAs: string, //为controller指定别名 redirectTo: string, function, //重定向的地址 resolve: object<key, function> //指定当前controller所依赖的其他模块。 });
