前端开发

 首页 > 前端开发 > AngularJS > AngularJS语法详解_AngularJS_自学php网

AngularJS语法详解_AngularJS_自学php网

分享到:
【字体:
导读:
          本文通过示例向大家介绍了AngularJS语法的使用,小伙伴们认真研读下吧,非常的实用哦。...

模板和数据的基本运作流程如下:

用户请求应用起始页面
用户的浏览器向服务器发起一次http连接,然后加载index.html页面,这个页面包含了模板
angular被加载到页面中,等待页面加载完成,查找ng-app指令,用来定义模板的边界
angular遍历模板,查找指定和绑定关系,将触发一些列动作:注册监听器、执行一些DOM操作、从服务器获取初始化数据。最后,应用将会启动起来,并将模板转换成DOM视图
连接到服务器去加载需要展示给用户的其他数据

显示文本

一种使用{{}}形式,如{{greeting}} 第二种ng-bind="greeting"

使用第一种,未被渲染的页面可能会被用户看到,index页面建议使用第二种,其余的页面可以使用第一种

表单输入

复制代码 代码如下:


    表单
   
   


   


        Starting:   //change的时候调用函数
        Recommendation: {{funding.needed}}
   



在某些情况下,我们不想一有变化就立刻做出动作,而是要进行等待。例如:

复制代码 代码如下:


    表单
   
   


   

  //ng-submit
        Starting:
        Recommendation: {{funding.needed}}
       
   



非表单提交型的交互,以click为例

复制代码 代码如下:


    表单
   
   


   


        Starting:
        Recommendation: {{funding.needed}}
       
       
   



列表、表格以及其他迭代型元素

ng-repeat会通过$index返回当前引用的元素序号。 示例代码如下:

复制代码 代码如下:


    表单
   
   


   


       
           
           
           
       
   
{{$index+1}}{{student.name}}{{student.score}}



隐藏与显示
ng-show和ng-hide功能是等价的,但是运行效果正好相反。

复制代码 代码如下:







 
 

       
  • Stun

  •    
  • Disintegrate

  •    
  • Erase from history

  •  

  


css类和样式

ng-class和ng-style都可以接受一个表达式,表达式执行的结果可能是如下取值之一:

表示css类名的字符串,以空格分隔
css类名数组
css类名到布尔值的映射
代码示例如下:

复制代码 代码如下:








{{messageText}}

   
   



css类名到布尔值的映射
示例代码如下:

复制代码 代码如下:








      //css类名到布尔值的映射,当模型属性selectedRow的值等于ng-repeat中得$index时,selectd样式就会被设置到那一行
       
       
   
{{restaurant.name}}{{restaurant.cuisine}}



分享到:
AngularJS语法详解(续)_AngularJS_自学...
src和href属性 Angularjs中src应写成ng-src,href应写成ng-href 例如: 复制代码 代码如下: Some text 表达式 在模板中可以进行简单的数学运算、比较运算、布尔运算、位运算、引用数组、和对象符号等 尽管我们可以使用表达式做很多事情,但是表达式是使用一个自定义的解释器来执行的(Angular的一部分),而不是用Java...
angular中使用路由和$location切换视图_A...
我们可以利用angular的$route服务来定义这样一种东西:对于浏览器所指向的特定URL,angular会加载并显示一个模板,并实例化一个控制器为模板提供内容。 在应用中,你可以通过调用$routeProvider服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可。 伪代码如下: 复制代码 代码如下: var someModu...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……