zoukankan      html  css  js  c++  java
  • AngularJs 入门

    AngularJs的是什么

    AngularJS 是一个 JavaScript 框架。

    AngularJs的历史

    AngularJs是在2009年起先由Miško Hevery和Adam Abrons开发的,在09年的时候发布版本1.0,目前最新版本是1.3。

    为什么要学习AngularJs

    对于前端的框架大家肯定都知道有很多种,但是我们为什么要选择AngularJs,他有什么特性值得我们放弃那么多的框架, 而选择他呢?

    • 1.MVC
    •  1 <!DOCTYPE html>
       2 <html ng-app="" >
       3 <head>
       4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       5     <title></title>
       6 </head>
       7 <body ng-controller="myCtrl">  //ng-controller就是控制器
       8     <p>{{person.name}}</p>   //p标签就是视图 {{person.name}}就是数据
       9     <script src="js/angular-1.2.16.js"></script>
      10     <script>
      11         function myCtrl($scope)
      12         {
      13             $scope.person = { "name": "hello" };
      14         }
      15     </script>
      16 </body>
      17 </html>
    • ng-controller从字面上就可以看出这是控制器的意思,在这我们把控制器定义为一个方法,<p>标签当然是所谓的视图,{{person.name}}就是所谓的数据了
    • 2.模板
    •  1 <!DOCTYPE html>
       2 <html ng-app="myApp" >
       3 <head>
       4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       5     <title></title>
       6 </head>
       7 <body ng-controller="myCtrl"> 
       8     <p>{{person.name}}</p> 
       9     <script src="js/angular-1.2.16.js"></script>
      10     <script>
      11         var app = angular.module( "myApp", [] );   //anular用自身带的一个函数定义了模块。
      12         app.controller( "myCtrl", function ( $scope )
      13         {
      14             $scope.person = { "name": "hello" };
      15         } )
      16     </script>
      17 </body>
      18 </html>

      大家学到后面就会发现angularJs要学习的内容很多,但是他一切都是围绕着模块开始的,这一点大家要记住。

    • 3.双向数据绑定
    • 4.指令

    AngularsJs语法

    AngularJs指令

    1.自带的指令

    应用程序ng-app:定义一个AngularJs应用程序

    <!DOCTYPE html>
    <html ng-app="" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body>
        {{4*5}}
        <script src="js/angular.js"></script>
    </body>
    </html>

    大家有没有注意到我在html标签中添加了一个属性ng-app,这个是定义一个AngularJs应用程序,一个页面有且只有一个ng-app,当你写了第二个应用程序ng-app时候,angularjs无法去编译,他只会去读取第一个应用程序,大家有注意到我这个ng-app的属性等于一个空的字符串,如果你命名了一个名称,及时你没有做任何操作,也要去定义,要不然会报错。

     1 <!DOCTYPE html>
     2 <html ng-app="myApp">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title></title>
     6 </head>
     7 <body>
     8     <div ng-app="">
     9         <div><input ng-model="search" /></div>
    10         <ul>
    11             <li ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]|filter:search">
    12                 {{i}}
    13             </li>
    14         </ul>
    15     </div>
    16     <script src="js/angular-1.2.16.js"></script>
    17     <script>
    18         var app = angular.module( "myApp", [] );  //如果你不定义的话,angularjs就会报错
    19     </script>
    20 </body>
    21 </html>

     初始化数据ng-init

    <!DOCTYPE html>
    <html ng-app="" >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
    </head>
    <body ng-init="first=5;secend=6">
        {{first*secend}}
        <script src="js/angular.js"></script>
    </body>
    </html>

    ng-init是angularJs初始化数据,在AngularJs中,还有一个初始化数据的指令为控制器ng-controller,这个会指令会在后面详细讲到。

    绑定数据ng-model

    ng-model主要是用在表单上

    ng-bind主要是用来展示

     1 <!DOCTYPE html>
     2 <html ng-app="">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title></title>
     6 </head>
     7 <body>
     8     <div ng-app="">
     9         <div><input ng-model="search" /></div>
    10         <p ng-bind="search"></p>
    11     </div>
    12     <script src="js/angular-1.2.16.js"></script>
    13 </body>
    14 </html>

    这两个指定都是用来做绑定数据,唯一的区别就是ng-model可以用在输入的形式下,也是我们通常讲的表单。

    重复HTML元素ng-repeat会去重复一个html元素

     1 <!DOCTYPE html>
     2 <html ng-app="">
     3 <head>
     4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5     <title></title>
     6 </head>
     7 <body>
     8     <!-- ng-repeat对数组循环 -->
     9     <ul ng-init="names=[1,2,3,4,5,6,7]">
    10         <li ng-repeat="i in names">{{i}}</li>
    11     </ul>
    12     <!-- ng-repeat对对象循环 -->
    13     <ul ng-init="person={'name':'hello','age':22}">
    14         <li ng-repeat="s in person">{{s}}</li>
    15     </ul>
    16     <!-- ng-repeat对对象数组循环 -->
    17     <ul ng-init="person=[{'name':'s','age':22},{'name':'s2','age':22},{'name':'s3','age':22}]">
    18         <li ng-repeat="s in person">{{s.name+", "+s.age}}</li>
    19     </ul>
    20     <script src="js/angular-1.2.16.js"></script>
    21 </body>
    22 </html>

    ng-repeat指令可以通过$index返回当前引用的元素序号,$first,$middle,$last,告诉你是否是集合中的第一个元素、中间的某个元素,或者最后一个元素。

    表达式

    表达式写在双答括号内,这个和handlebars一样:{{expression}},和AngularJs指令ng-bind,有异曲同工的作用,AngularJs表达式很像Javascript表达式:可以包含文字、运算符和变量 实例{{5+5}}或{{firstName+" "+lastName}}

     <!DOCTYPE html>
     <html ng-app="">
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
         <title></title>
     </head>
     <body>
         {{5+5}}
     <script src="js/angular.js"></script>
     </body>
     </html>

    ng-bind和{{expression}}表达式的区别

    用表达式,在第一个加载页面,其未被渲染好的模板会被用户看到,而使用ng-bind就不会出现这种情况。造成这种原因是,浏览器需要首先加载html页面,渲染它,然后Angular才有机会把他解释成我们期望的内容。

  • 相关阅读:
    使用 asp.net mvc和 jQuery UI 控件包
    ServiceStack.Redis 使用教程
    HTC T8878刷机手册
    Entity Framework CodeFirst 文章汇集
    2011年Mono发展历程
    日志管理实用程序LogExpert
    使用 NuGet 管理项目库
    WCF 4.0路由服务Routing Service
    精进不休 .NET 4.0 (1) asp.net 4.0 新特性之web.config的改进, ViewStateMode, ClientIDMode, EnablePersistedSelection, 控件的其它一些改进
    精进不休 .NET 4.0 (7) ADO.NET Entity Framework 4.0 新特性
  • 原文地址:https://www.cnblogs.com/zengm/p/3948443.html
Copyright © 2011-2022 走看看