美文网首页我爱编程
AngularJS---指令

AngularJS---指令

作者: BugMyGod | 来源:发表于2018-05-15 14:15 被阅读0次

    AngularJS:js框架,实现单页面的增删改查.他是一个以JavaScript编写的库。

    建议把脚本放到<body>元素的底部,这样会提高网页加载速度,因为HTML加载不受制于脚本加载。

    首先:记得定义控制器

    <script>
            var app= angular.module('angularJSApp',[]);
            app.controller('myCtrl',function(){
    
            })
     </script>
    在一个页面里定
    

    在一个页面里定义多个控制器,直接追加

     angular.module('angularJSApp',[])
        .controller('watchCtrl1',function(){
            //定义多个控制器,直接追加
        })
         .controller('watchCtrl2',function(){
    
        })
    

    1,ng-app:指令定义一个AngularJS应用程序
    一个页面只能有一个ng-app的指令,写多个只能第一个被使用

    <body class="container" ng-app="angularJSApp">  
    
    注意:AngularJSApp是可选值

    2,ng-init: 初始化
    在应用程序运行前执行.和控制器中定义的变量是独立的
    字符串、数值、对象、数组

    ng-init=“name='admin'"                 
     ng-init=“score='[12,13,22]'" 数组                 
     ng-init=“student{score='[12,13,22]}'" 对象         对象名.属性名/方法名                
     ng-init=“score=30"  
    建议使用function初始化数据
    function initVar($scope){
       //model:初始化数据,$scope
       //controller
    }
    

    3,ng-bind:绑定 数据初始化好以后,就可以绑定使用
    指令把应用程序数据绑定到 HTML 视图

    <span ng-bind="info.title"></span>  
    
    绑定也可以用表达式         
    写法: {{expression}}        
     作用:把数据绑定到 HTML,输出数据    与 ng-bind 指令有异曲同工之妙   
    title by expr:{{info.title}} 
    title:<span ng-bind="info.title"></span>
    可以包含文字、运算符和变量
    

    4,ng-modal: 实现双向绑定
    实现双向绑定,单纯的js也能实现,动态监听输入框的值是否变化
    指令把元素值(比如输入域的值)绑定到应用程序

    5,ng-repeat: 遍历所有的集合,生成html
    定义集合中每项数据的模板

    6,ng-controller: 定义应用的控制器对象
    定义控制器

    PS: MVC:         
     model:          
     view:            
    controller:
    

    控制器:
    控制AngularJS应用程序的数据。即上边定义好的 单页面应用 ng-app=""
    常规的JavaScript对象
    注:在angular-1.2.5.js中可以直接写成函数
    demo:

    var app=angular。module(‘angularJSApp’,[]);
            app.controller('myCtrl',function($scope){
        $scope.name='angular';
        $scope.info={title:'angularJS',price:130;
        });
    

    ng-controller=“myCtrl”定义了一个控制器,即“myCtrl”实际上是一个函数.

    相关文章

      网友评论

        本文标题:AngularJS---指令

        本文链接:https://www.haomeiwen.com/subject/fegedftx.html