AngularJS tips-2 初始篇

1var phonecatApp = angular.module(‘phonecatApp‘, []);  //在js中创建自定义模块phonecatApp根模块,在<html lang="en" ng-app="phonecatApp">加载。

2phonecatApp.controller(‘PhoneListCtrl‘, function($scope) {}  //在<body ng-controller="PhoneListCtrl">加载control模块。

3ng-app: angular.module(‘phonecatApp‘, []); //根模块

4ng-controller:phonecatApp.controller(‘PhoneListCtrl‘, function($scope) {}

5ng-repeat:<tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">

6ng-model="orderProp" //orderBy:orderProp 按照orderProp的排序方式

7var ListControl=(‘xxxcontroller‘,[‘$scope‘,‘$http‘,function(‘$scope‘,‘$http‘){

$http.get(‘phones/phones.json‘).success(function(data) {
    $scope.phones = data.splice(0,3);
  });

}]); //从外部数据库中获取数据,这里例举json文件,splice选取0,1,2的共三个数据

8ng-src="{{phone.imageUrl}}"  //用js标记src链接

9route:

ng-view: 占位符,用来加载route引导的页面

var phonecatApp = angular.module(‘phonecatApp‘, [
‘ngRoute‘,
‘phonecatControllers‘
]);

phonecatApp.config([‘$routeProvider‘, function($routeProvider) {  //routeProvider  页面引导功能
  $routeProvider.
  when(‘/phones‘, {
  templateUrl: ‘partials/phone-list.html‘,
  controller: ‘PhoneListCtrl‘  //为不同的页面加载不用的控制器
  })
}]);

时间: 2024-08-02 16:03:39

AngularJS tips-2 初始篇的相关文章

Swift开发学习(一):初始篇

http://blog.csdn.net/powerlly/article/details/29351103 Swift开发学习:初始篇 关于 苹果公司于WWDC2014(Apple Worldwide Developers Conference. June 2-6, San Francisco)发布新的编程语言--Swift.在这里就不重复介绍了,本篇主要简单列举几点,然后介绍Swift入门操作. Swift是什么 Swift是用来写iOS和OS X程序的编程语言. Swift吸取了C和Obj

angularJS培训之helloworld篇

学习一门新的语言我们总是来句'hello,world!',来,我们看下angularJS的helloworld版本是怎么实现的. 1.首先我们下载angularJS库,你可以从官网angularjs.org或者github下载,也可以从github上的         angular-seed 项目中找到对应库文件,也可以通过Google的CDN网络加载文件.通过script标签引入到文件中 2.开发工具 js开发的神器首推webstorm莫属,超强的重构能力,karma,grunt的支持,js

[AngularJS] AngularJS系列(4) 中级篇之指令

目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 先上一段伪代码: angular.module('moduleName', []).directive( 'namespaceDirectiveName', [ function() { return { restrict : '',// 描述指令在模版中的使用方式,包括元素E,属性A,CSS样式

SSAS &amp; Excel BI Tips番外篇之一:What-If分析

这个系列用于记录工作中利用SSAS和Excel进行数据分析的经验技巧,正片放在了天善(SSAS & Excel BI Tips),番外篇现在打算以博客的形式来分享些小技巧,小到不足以作为独立的课程来讲解,但又是很多BA, BU不熟悉却很有用的技能,献给需要的朋友. 此篇说的是Excel的What-If假设分析,SSAS的What-If Writeback打算放在正片讲解. 下图所示是一个简单的等额本金贷款月供计算,第一行是总贷款额30万,第二行是已还款月数默认置为0,第三行是总还款月数20年24

[AngularJS] AngularJS系列(6) 中级篇之ngResource

目录 $http ngResource $http几乎是所有ng开发中,都会用到的服务.本节将重点说下$http 与 ngResource $http 使用:$http(config); 参数: method:字符串,请求方法. url:字符串,请求地址. params:字符串或者对象,将使用paramserializer序列化并且作为GET请求的参数. data:字符串或者对象,作为请求信息数据的数据. headers:对象,字符串或者函数返回表示发送到服务器的HTTP请求头.如果函数的返回值

[AngularJS] AngularJS系列(1) 基础篇

目录 什么是AngularJS? 为什么使用/ng特性 Hello World 内置指令 内置过滤器 模块化开发 一年前开始使用AngularJS(以后简称ng),如今ng已经出2了.虽说2已完全变样,但是1.x还是足够优秀. 什么是AngularJS? ng是一个js框架,目前最新版本为1.5.8. 官网:https://angularjs.org/ 下载: Install-Package AngularJS.Core npm install [email protected] 为什么使用/n

[AngularJS] AngularJS系列(3) 中级篇之表单验证

目录 基本验证 验证插件messages 自定义验证 基本验证 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <form name="form" novalidate ng-app>     <span>{{form.$invalid}}</span>     <span>{{form.$valid}}</span>     <span>{{form.$dirty}}</spa

angularJS之使用过滤器转化输出 (angularJS系列最后一篇)

在视图模板中使用过滤器 过滤器也是一种服务,负责对输入的内容进行处理转换,以便更好地向用户显示. 过滤器可以在模板中的{{}}标记中使用: {{ expression | filter:arg1:arg2}} 预置的过滤器 AngularJS的ng模块实现了一些预置的过滤器,如:currency.number等等,可以直接 使用.例如下面的示例将对数字12使用currency过滤器,结果将是"$12.00": {{12|currency}} 带参数的过滤器 过滤器也可以有参数,例如下面

[AngularJS] AngularJS系列(2) 中级篇之路由

目录 原理 angular-route ui-router 事件 深度路由 原理 ng的route本质是监听hashchange事件. 在angular-route中 $rootScope.$on('$locationChangeStart', prepareRoute); $rootScope.$on('$locationChangeSuccess', commitRoute); 在ui-router中 listener = listener || $rootScope.$on('$locat