当前位置:首页 > 开发 > Web前端 > JavaScript > 正文

关于angularjs的点滴

发表于: 2014-12-06   作者:tntxia   来源:转载   浏览:
摘要:   angular是一个新兴的JS框架,和以往的框架不同的事,Angularjs更注重于js的建模,管理,同时也提供大量的组件帮助用户组建商业化程序,是一种值得研究的JS框架。   Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。   这里我们来简单的探讨一下它的应用。   首先使用Angularjs我

 

angular是一个新兴的JS框架,和以往的框架不同的事,Angularjs更注重于js的建模,管理,同时也提供大量的组件帮助用户组建商业化程序,是一种值得研究的JS框架。

 

Angularjs使我们可以使用MVC的模式来写JS。Angularjs现在由谷歌来维护。

 

这里我们来简单的探讨一下它的应用。

 

首先使用Angularjs我们必须引入他的JS文件。

 

<script src="../angular.min.js"></script>

 

这个文件我上传到了附件中了。

 

Angular的主要部分包括:

 

 

ng-app :AngularJS程序入口,对该标签内的元素进行初始化。

 

 

ng-controller :在当前元素范围内绑定指定的控制器(controller)。

 

 

ng-model :指定当前元素与数据模型($scope)中的属性绑定,如果数据模型中没有此属性,会自动新建一个。

 

 

ng-repeat :循环$scope中的属性,类似于{{#each beans}}

 

 

{{xxx}} :花括号表示读取某一属性值

 

 

filter、orderBy :过滤器。filter可以根据指定的属性过滤数据(例子里是quer属性)。orderBy是排序过滤器。这两个过滤器都是内置的。过滤器是可自定义的。
 
我们来看一下例子:
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../angular.min.js"></script>
  <script>
  var StudentListCtrl = ['$scope', '$http',
 function($scope, $http) {

  $http.get('json/students.json')
    .success(function(data) {

      $scope.students = data;

    });

  $scope.sortType = 'age';
 }
];

  </script>
</head>
<body ng-app ng-controller="StudentListCtrl">
	<input ng-model="quer"/>
  <select ng-model="sortType">
    <option value="name">
	按名字排序</option>
    <option value="id">
	按学号排序</option>
  </select>
  <ul>
    <li ng-repeat="student in students
	| filter:quer | orderBy:sortType">
     {{student.name}}
     <p>{{student.sex}}</p>
     <p>{{student.age}}</p>
     <p>
      <img ng-src="{{student.img}}"/>
     </p>
    </li>
   </ul>

</body>
</html>
 
其中students.json的内容为:
 
[
 {
  "age": 13,
  "id": "0001",
  "name": "陈大虾",
  "sex": "男",
  "img":"im"
 },
{
  "age": 14,
  "id": "0002",
  "name": "陈大锅",
  "sex": "男"
 },
 {
  "age": 15,
  "id": "0003",
  "name": "邓小娇",
  "sex": "女"
 }
]
 

 显示的结果为:

 

  • 陈大虾

    13

  • 陈大锅

    14

  • 邓小娇

    15

 在这个例子里面,我们改变下拉框的内容,则列表显示的结果会有变化,这就是Angular的方便之处,我们只需要文件,建模的内容,而动态内容的js实现已经不需要我们来实现了。

 

 

 

 

 

 

关于angularjs的点滴

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
关于AngularJS的常见问题(入门篇) 这篇是准本为没有任何AngularJS基础的小伙伴准备的,大拿请自动
关于AngularJS的常见问题(入门篇) 这篇是准本为没有任何AngularJS基础的小伙伴准备的,大拿请自动
3 点滴
1、实现一次pop多层。 NSArray *controllers = self.navigationController.viewControllers; NSInte
参考:http://www.runoob.com/angularjs/angularjs-intro.html http://angularjs.cn/A00n AngularJs
AngularJS是一个超棒的javascript框架,不单单对于开发人员来说非常有吸引力,对于UI设计师来说也同
最近在家天天都在做自己的毕业设计——Flowg微博系统。 先献丑放出一张系统的logo,自己用PS的钢笔
现在学习C++,前几天看到一个程序,如下所示: (上图摘于ITjob网站) 当时就很困惑,因为我是初学,
如何在一个apk中调用另外一个apk中的activity? 系统提供了很多可以直接调用的Activity,通过指定的I
Chrome浏览器下可使用插件~ Minimalist Markdown Editor,可见即所得~so easy~~~ 最近写微信公众号
官网:https://cloud.genymotion.com/page/launchpad/download/ 问题一:如下图 解决方法:win7以上
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号