<!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

     <link href="/js/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />

     <title>itcastNg</title>

     <script>

         (function (window) {

             //此处的代码不会污染全局作用域

             var myApp = window.angular.module('myApp', []);

             myApp.controller('DemoController', function ($scope) {

                 $scope.value = 10;

                 $scope.doCalc = function () {

                     $scope.value *= 2;

                 };

                 $scope.phones = [

                     {

                         "name": "Nexus S",

                         "snippet": "Fast just got faster with Nexus S.",

                         "age": 0

                     },

                     {

                         "name": "Motorola XOOM™ with Wi-Fi",

                         "snippet": "The Next, Next Generation tablet.",

                         "age": 1

                     },

                     {

                         "name": "MOTOROLA XOOM™",

                         "snippet": "The Next, Next Generation tablet.",

                         "age": 2

                     }

                 ];

             });

             myApp.controller('PhoneController', function ($scope, $http) {

                 /* phones.js json数据

                  [

                             {

                                 "name": "Nexus S",

                                 "snippet": "Fast just got faster with Nexus S.",

                                 "age": 0,

                                 "imageUrl": "/img/01.png",

                                 "id":1

                             },

                             {

                                 "name": "Motorola XOOM™ with Wi-Fi",

                                 "snippet": "The Next, Next Generation tablet.",

                                 "age": 1,

                                 "imageUrl": "/img/02.png",

                                 "id": 2

                             },

                             {

                                 "name": "MOTOROLA XOOM™",

                                 "snippet": "The Next, Next Generation tablet.",

                                 "age": 2,

                                 "imageUrl": "/img/03.png",

                                 "id": 3

                             }

                  ]

                 */

                 //json/phones.js 换成上面的json

                 $http.get('/html/angular/json/phones.js').success(function (data) {

                     $scope.phones = data;

                 });

             });

         })(window);

     </script>

     <style>

         .red { color: red; }

     </style>

 </head>

 <body>

     <div class="container" ng-app="myApp">

         <div class="row" ng-controller="DemoController">

             <div class="col-md-12">

                 <input type="text" ng-model="value" />

                 <input type="button" ng-click="doCalc()" value="*2" />

                 <br />

                 <input type="checkbox" ng-model="v"><span ng-class="{'red':v}">v</span><br />

             </div>

             <div class="row">

                 <div class="col-md-6">

                     <ul>

                         <li ng-repeat="phone in phones">

                             {{phone.name}}

                             <p>{{phone.snippet}}</p>

                         </li>

                     </ul>

                     <p>Total number of phones: {{phones.length}}</p>

                 </div>

                 <div class="col-md-6">

                     <div>

                         <!--Sidebar content-->

                         Search: <input ng-model="query"> - <span>{{query}}</span>

                     </div>

                     <div>

                         <!--Body content-->

                         <ul>

                             <li ng-repeat="phone in phones | filter:query">

                                 {{phone.name}}

                                 <p>{{phone.snippet}}</p>

                             </li>

                         </ul>

                     </div>

                 </div>

             </div>

         </div>

         <div class="row" ng-controller="PhoneController">

             Search: <input ng-model="query">

             Sort by:

             <select ng-model="orderProp">

                 <option value="name">Alphabetical</option>

                 <option value="age">Newest</option>

             </select>

             <ul>

                 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">

                     {{phone.name}}

                     <p>{{phone.snippet}}</p>

                 </li>

             </ul>

         </div>

         <hr />

     </div>

 </body>

 </html>

或者简单点...

  angular.module("myapp", [])

         .controller("phoneController", function ($scope, $http, $location) {

            //todo...

         });

angular.js规范写法的更多相关文章

  1. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  2. Angular.js浅谈

    至今博主对于MVVM框架比较了解的就只能算有Angular了,首先给大家明确一个概念,Angular1.x才能叫Angular.js,而Angular2.4.5都直接叫Angular了,因为从2开始已 ...

  3. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

  4. 学习angular.js的一些笔记想法(上)

    1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-change ...

  5. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  6. angular.js——小小记事本3

    app.js部分,首先是路由.这个之前讲过了,链接在这里—— http://www.cnblogs.com/thestudy/p/5661556.html var app = angular.modu ...

  7. angular.js之路由的选择

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西 ...

  8. Angular.js之自定义指令学习笔记

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. Angular.js学习笔记（三）

    一.过滤器 1.uppercase,lowercase 大小写转换{{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRI ...

随机推荐

  1. ASP.Net请求处理机制初步探索之旅 - Part 3 管道

    开篇:上一篇我们了解了一个ASP.Net页面请求的核心处理入口,它经历了三个重要的入口,分别是:ISAPIRuntime.ProcessRequest().HttpRuntime.ProcessReq ...

  2. Redis高可用分布式内部交流(九)

    这是上月在公司内部的一次分享,现把PPT及交流内容整理成博客. 阅读目录: 高可用 数据同步 分布式 分布式集群时代 总结 高可用 高可用(High Availability),是当一台服务器停止服务 ...

  3. AD域内DNS服务器如何解析公网域名

    原创地址:http://www.cnblogs.com/jfzhu/p/4022999.html 转载请注明出处 AD域内需要有DNS服务器,用于解析域内的计算机名,但是域内的计算如何解析公网的域名呢 ...

  4. 《Entity Framework 6 Recipes》中文翻译系列 (8) -----第二章 实体数据建模基础之继承关系映射TPT

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 2-8 Table per Type Inheritance 建模 问题 你有这样一 ...

  5. 《Hive编程指南》—— 读后总结

    知识图谱

  6. Rabbitmq安装与配置

    install: 1.安装Erlang: $yum -y install erlang 2.安装rabbitmq-server: $rpm --import https://www.rabbitmq. ...

  7. 手写原生ajax

    关于手写原生ajax重要不重要,各位道友自己揣摩吧, 本着学习才能进步,分享大家共同受益,自己也在自己博客里写一下 function createXMLHTTPRequest() { //1.创建XM ...

  8. salesforce 零基础学习（四十六）动态美观显示列表中记录的审批状态

    项目中,申请者申请某些事项以后,常常需要在申请列表中查看当前申请的记录所在的审批状态,动态美观的显示状态可以使UI更符合客户要求,比如下面这样. 以Goods__c表为例,申请者申请的一些采购以前需要 ...

  9. JS原生第八篇 （帅哥）

    1.1 复习     1. clientX          clientWidth   可视区域的宽度 clientWidth     width  +  padding offsetWidth   ...

  10. SQL Server 通过备份文件初始化复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 疑问(Questions) 参考文 ...