angular

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)

创建自定义的指令（.directive）

使用驼峰法来命名一个指令， 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所依赖的其他模块。
});