最近有点时间,想系统的学习下angular.会把要做笔记的地方记录下,方便以后查询。

Part 1.

对于一个index.html

包括三部分

  1. ng-app = "phonecatApp" 定义了作用域

  2. ng-controller = "PhoneListController" 定义了controller

  3. ng-repeat = "phone in phones" 定义了实现

对于app.js

1.var phonecatApp = angular.module('phonecatApp',[]); 定义phonecatApp module

2. phonecatApp.controller ('PhoneListController', function PhoneListController($scope) {

  $scope.phones =[...];

}

tips:

a.ng-repeat = "phone in phones | filter:query" 用来做fitler

index.html -> define  <phone-list></phone-list>

In app.module.js

'use strict';

// Define the `phonecatApp` module
angular.module('phonecatApp', [
  // ...which depends on the `phoneList` module
  'phoneList'
]);

In phone-list.module.js

'use strict';

// Define the `phoneList` module
angular.module('phoneList', []);

In phone-list.component.js

'use strict';

// Register `phoneList` component, along with its associated controller and template
angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController() {
      this.phones = [
        {
          name: 'Nexus S',
          snippet: 'Fast just got faster with Nexus S.'
        }, {
          name: 'Motorola XOOM™ with Wi-Fi',
          snippet: 'The Next, Next Generation tablet.'
        }, {
          name: 'MOTOROLA XOOM™',
          snippet: 'The Next, Next Generation tablet.'
        }
      ];
    }
  });

转载于:https://www.cnblogs.com/hellocz/p/6088965.html

Angular JS相关推荐

  1. [Angular JS教程] HeroService: getHeroes failed: undefined 问题解决方法

    最近在学习入门Angular JS,学习资源是https://angular.cn/tutorial, 在学习到 "https://angular.cn/tutorial/toh-pt6模拟 ...

  2. angular.js 嵌套路由

    介绍 AngularJS 嵌套路由:,来看看嵌套的ui-router状态是怎么回事. ui-router和同属AngularJS框架一部分的ng-route一样强大. ui-router提供了让我们可 ...

  3. 如何使用多个参数调用Angular.js过滤器?

    本文翻译自:How do I call an Angular.js filter with multiple arguments? As from the documentation , we can ...

  4. 如何在Angular.js选择框中使用默认选项

    本文翻译自:How to have a default option in Angular.js select box I have searched Google and can't find an ...

  5. angular.js phonecat翻译

    AngularJS 手机目录应用教程 概述 这个应用将带领开发者贯穿使用angularjs来开发一个web-app程序.这个应用程序是基于 Google Phone Gallery 但它现在已经不存在 ...

  6. Angular js 具体应用(一)

    1,首先引用Angular  百度静态资源库搜索Angular  复制链接,在HTML中嵌入script 最好写在正文下面 <script type="text/javascript& ...

  7. angular js一factory,service,provider创建服务

    服务:在AngularJS 中,服务是一个函数或对象 在写控制器的时候,不要复用controller,当我们的controller里面有相同的代码时,此时需要把它抽取成一个服务,所有的服务都符合依赖注 ...

  8. Angular JS 中的内置方法之表单验证

    angular js 结合html5 可以实现强大的表单验证功能 关闭html5自带的表单验证功能可以用 转载于:https://www.cnblogs.com/Pikzas/p/9005861.ht ...

  9. Angular JS 中的内置方法之$watch

    在$apply方法中存在脏检查,首先apply方法会触发evel方法,当evel方法解析成功后,会去触发digest方法,digest方法会触发watch方法. $watch(watchFn,watc ...

  10. angular.js前端和后台的数据交换,后台取不到值对应方案

    2019独角兽企业重金招聘Python工程师标准>>> 环境:angular.js+sastruts+apache-tomcat 最近在学习前端的一个设计工具angular.js,数 ...

最新文章

  1. 2019 好笔友-见字如面
  2. java低延迟_像Java这样的C ++具有低延迟
  3. js 获取当前元素的父元素的父元素的id
  4. matplotlib 直方图_Matplotlib直方图和散点图
  5. 《java入门第一季》之java语法部分小案例
  6. linux-headers,如何升级linux-headers-generic?
  7. sql oltp_SQL Server中的内存中OLTP的快速概述
  8. dpkg: error: dpkg status database is locked by another process
  9. nginx负载均衡fair模块安装和配置
  10. SpringBoot2.x填坑(一):使用CROS解决跨域并解决swagger 访问不了问题
  11. python源码大全-python代码大全
  12. 写博客一年多的一些感想
  13. box-sizing属性的理解
  14. C语言的va_list使用方法
  15. JS原生事件如何绑定
  16. 线性规划Matlab程序(小白向)
  17. (windows) 开机时出现“checking file system on C” 问题原因及解决方法
  18. 认识Lambda表达式
  19. 小米max3支持html吗,小米Max3怎么样 到底值不值得买
  20. C++ 求 等差数列

热门文章

  1. python 多线程 paramiko实现批量命令输入输出
  2. partial、struct、interface与C#和CLR的关系
  3. Windows 命令行改主机名、加域、退域、更改IP
  4. C++---set/multiset用法介绍
  5. 【Vue】npm run serve 和 npm run dev 有什么区别
  6. JavaScript学习(五十七)— arguments对象
  7. 二套房贷款首付比例?
  8. 跟女朋友约会一般都干些什么?
  9. 买基金,是长期持有好,还是短线操作好?
  10. 什么叫“职业年金”,与养老保险有什么关系?