<!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. 分区里的inode号是0号和1号的block

    分区里的inode号是0号和1号的block 我相信大家在使用Linux的时候都遇到过误删文件系统数据的情况,不管是自己误删还是帮人家恢复误删 现在用的比较多的恢复工具大概是ext3grep .ext ...

  2. Lesson 1 A private conversation

    Text Last week I went to the theatre. I had a very good seat. The play was very intersting. I did no ...

  3. 如何在Visual Studio 工程之间共享静态内容 (js, css, img, etc.)

     第一步: 文件夹上点击右键 -> Add -> Existing Item,单击选中文件,不要点击“Add”按钮,而是在“Add”按钮右边有个向下的小箭头,点击这个箭头,再点击“Add ...

  4. 探索C#之微型MapReduce

    MapReduce近几年比较热的分布式计算编程模型,以C#为例简单介绍下MapReduce分布式计算. 阅读目录 背景 Map实现 Reduce实现 支持分布式 总结 背景 某平行世界程序猿小张接到B ...

  5. Spark DAGSheduler生成Stage过程分析实验

    RDD.Action触发SparkContext.run,这里举最简单的例子rdd.count() /** * Return the number of elements in the RDD. */ ...

  6. WCF 安全性 之 None

    案例下载 http://download.csdn.net/detail/woxpp/4113172 服务端配置代码 <system.serviceModel> <services& ...

  7. Utility1：Overview

    Utility 是利用,使用的意思,utilization是指使用效率,利用率的意思. SQL Sever 内置 Utility Feature,便于集中监控Server关键资源(CPU和Disk)的 ...

  8. Javascript刷题 》 查找数组元素位置

    找出元素 item 在给定数组 arr 中的位置 输出描述: function indexOf(arr, item) { ..... } 如果数组中存在 item,则返回元素在数组中的位置,否则返回 ...

  9. 每天多一点（2016.12.04）》Javascript隐式转换

    乱想 javascript为什么需要隐式转换?如果没有会出现什么情况? 找了一圈没有看到关于这个的讨论,只好自己研究了,可能不一定正确,自行辨知. 郁闷就是郁闷在好好的,为什么要搞个隐式转换,一般来讲 ...

  10. HTML5系列：HTML5表单

    1. input元素新增类型 url类型 url类型的input元素是一种用来输入url的文本框,提交时如果该文本框中内容不是url格式,则不允许提交. <input type="ur ...