这里使用的是angular-1.0.1.min.js

Angular的前端渲染

  1. <div>
  2. <ul>
  3. <li ng-repeat="i in [1,2,3]">
  4. <h1>{{i}}</h1>
  5. </li>
  6. </ul>
  7. </div>

效果:

使用控制器读取JSON:

  1. <div ng-controller="PhoneListCtrl">
  2. <ul>
  3. <li ng-repeat="phone in phones">
  4. <h1>{{phone.name}}</h1>
  5. <p>{{phone.snippet}}</p>
  6. </li>
  7. </ul>
  8. </div>

控制器代码:

  1. function PhoneListCtrl($scope) {
  2. $scope.phones = [{
  3. "name" : "Nexus S",
  4. "snippet" : "Fast just got faster with Nexus S."
  5. }, {
  6. "name" : "Motorola XOOM with Wi-Fi",
  7. "snippet" : "The Next, Next Generation tablet."
  8. }, {
  9. "name" : "MOTOROLA XOOM",
  10. "snippet" : "The Next, Next Generation tablet."
  11. }
  12. ];
  13. }

效果:

你也可以自己定义一个控制器:

  1. <div ng-controller="mycontroller">
  2. <p>{{ article.ID }}</p>
  3. <p>{{ article.Name }}</p>
  4. <button ng-click="func()">测试</button>
  5. </div>

控制器实现:

  1. function mycontroller($scope) {
  2. $scope.article = {
  3. ID : 1,
  4. Name : "hell world"
  5. };
  6. $scope.func = function () {
  7. alert(1);
  8. }
  9. }

效果:

  

  

  

  

Angular控制器的更多相关文章

  1. angular控制器常用的4种通信方式

    首先概括一下angular控制器通信的4种方式: 作用域继承. 通过$scope广播事件. 事件发射器模块. 服务. 1.作用域的继承 子作用域可以访问声明在它们的祖先作用域中的变量和函数. < ...

  2. angular 控制器之间的通信

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  3. angular控制器之间的传值

    每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子... 那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个 ...

  4. angular控制器、服务和指令三者之间的关系

    从总体来看,这三个组件的关系如下所示: 服务负责从远端服务器抓取和存储数据. 基于服务构建的控制器将为angular的作用域层次提供数据和功能. 基于服务和控制器构建的指令将直接与文档对象模型(DOM ...

  5. angular控制器的执行顺序和服务的注入情况

    这篇文章到底要讲什么呢? 这必须要从栗子开始讲起... 看下面这两段代码: demo1: http://jsfiddle.net/ujzmvp3j/1/ demo2: http://jsfiddle. ...

  6. 简话Angular 02 Angular控制器-作用域嵌套

    一句话: 就是孩子可以啃老,老子不能动孩子一根毛! * 子控制器有父控制器里变量的所有权限,可以读取,也可以修改. * 父控制器不能读,也不能修改孩子的变量 1. html代码 <div ng- ...

  7. angular 控制器的使用两种模式

    angular.module("myApp",[]) .controller("firstCtrl",["$scope",function( ...

  8. angular 控制器之间值得传递

    <div ng-controller="ParentCtrl"> <!--父级--> <div ng-controller="SelfCtr ...

  9. angular控制器controller里获取不到ng-model的值,获取为undefined

    所遇问题: html:ng-model=“test”, 但是在controller里打印的$scope属性里面并未发现test,控制台打印test为undefined,页面上{{test}}却可以正常 ...

随机推荐

  1. 创建 Web 前端开发环境(node和npm)

    Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础. 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt. ...

  2. JMeter使用代理录制脚本

    用JMeter做接口测试,有时候接口数量比较多,用录制方式可以节省很多时间,录制接口可以配合badboy使用,但是badboy访问的浏览器是基于ie6的,基本上现在的网站不会对ie6做兼容了,使用代理 ...

  3. ANT风格URL规则

    转: 我们在看Java技术书籍的过程中,当加载文件时总会遇到是否支持ant风格路径加载,这里说的ant风格是什么意思呢,今天我查了一下,明白了什么意思,现在总结一下 ANT通配符有三种: 通配符 说明 ...

  4. main函数执行前、后再执行的代码

    一.main结束 不代表整个进程结束  (1)全局对象的构造函数会在main 函数之前执行,          全局对象的析构函数会在main函数之后执行:          用atexit注册的函数 ...

  5. jQuery replaceWith replaceAll end的用法

    jQuery replaceWith replaceAll end的用法 <%@ page language="java" import="java.util.*& ...

  6. underscore 1.7.0 api

    它是这个问题的答案:“如果我在一个空白的HTML页面前坐下, 并希望立即开始工作, 我需要什么?“ http://www.css88.com/doc/underscore/#

  7. 从RPC开始(二)、序列化

    在C++的世界里构建一个序列化框架:并非一件困难的事情,但也并非简单.因此,需要分成两部分来完成这项任务: 1.序列化容器. 2.序列化方式. 前者,很容易理解:但也决定着我们将要存储数据的方式:二进 ...

  8. Java各种工具下载

    http://yunpan.cn/cyUzqFTu8pEER  提取码 355c  myeclipse2013 http://yunpan.cn/cyUzPi7nC8Z9S  提取码 fc4b  my ...

  9. webpack 学习心得(一)

    Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 因为本人也正在学习webpack ,所以此篇文章比较入门. 首先你想使用webp ...

  10. StringUtils工具类常用方法介绍(持续更新)

    StringUtils方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的(即如果输入参数String为null则不会抛出Nu ...