今天学的angularJS

首先引入js文件angular.min.js,
引入控制器:controllers。js
其中可以定义多个控制器:比如
var PhoneListCtrl = [‘变量‘,‘变量‘,function(变量,变量){
//为布局中的变量赋值,比如
$http.get(XXX).success(function(data){
$scope.phones = data;
});
}];
var PhoneDetailCtrl = [‘$scope‘,‘$routeParams‘,function($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}];
$scope:布局文件中的变量对象
$http:用于获取文件的对象
$routeParams:用于从路径中获取变量的对象。

布局中:
ng-app="phonecat"
导入一个名为phonecat的映射
<div ng-view></div>
导入 ng的视图
<select ng-model="orderProp">
用于搜索的select,匹配器为orderProp
<input ng-model="query">
用于搜索的input,匹配器为query

<li>
ng-repeat="phone in phones" 对phones变量进行遍历,存放在phone单元中
filter:query 匹配input查找
orderBy:orderProp 匹配 select 排序
<a>
href="#/phones/{{phone.id}}"这个链接就是用于app的映射的
<img>
ng-src="{{phone.imageUrl}}"不能用src,是在页面载入以后加载图片的

app.js中://定义名为phonecat的映射.config:设置
angular.module(‘phonecat‘,[]).
config([‘$routeProvider‘,function($routeProvider){
$routeProvider.when(‘/phones‘,{templateUrl:‘XXX‘,controller: PhoneListCtrl}).
when(‘/phones/:phoneId‘,{templateUrl: ‘partials/phone-detail.html‘, controller: PhoneDetailCtrl})
}]);

今天学的angularJS,布布扣,bubuko.com

时间: 2024-08-06 03:34:15

今天学的angularJS的相关文章

AngularJs的关于路由问题

初学AngularJs一些天,发现AngularJs到最后的时候会很难.刚刚开始的时候特别不容易适应,到中间的部分,还是比较简单,到最后的时候就发现特别难.我看到了网站上说到了AngularJs中,学习路线是比较奇怪的,有些诡异.我想想不知道是不是对的.今天我在学习AngularJs路由知识点的时候,遇到了一些问题,就是路由不到.以下是刚刚开始写的代码. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4

看angularjs项目的一些知识记录

这两天项目组长在安排我学习用angularjs+Echarts做的项目代码,边看边记录吧,给自己留个总结 1.Angularjs中UI Router文档 2.Angularjs中Material的使用 3.requirejs文档 几个指令特点记录 1.ng-value中可以写表达式 <input type="text" ng-value="price*num"/> 2.当我们点击checkbox 选中复选框时,ng-model 的绑定默认值是true,取

angularJS学习手册(1)

欢迎来到augularJS的学习 一.什么是angularJS? angular的英文意思是角,为什么要叫angular我也不知道. AngularJS是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换.将让你的开发非常爽.AngularJS有着诸多特性,最为核心的是

CXF发布支持ajax跨域访问的restful webservice

用apache cxf构建了一个玩具型restful webservice,内嵌jetty,加上gradle,发布无比轻松. apply plugin: 'java' apply plugin: 'application' repositories { maven { url "http://maven.oschina.net/content/groups/public" } } [compileJava,compileTestJava,javadoc]*.options*.encod

《AngularJS即学即用》读书笔记(一)

最近在学习angularJS,就买了一本<AngularJS即学即用>作为自己的入门书籍,到目前为止看了两章的内容,感觉这本书还是不错的,东西讲的浅显易懂.之所以写这篇文章,一是督促自己能够坚持学习,二是能够给自己一个回头复习的机会,同时也希望能够帮到想学习Angular的同学一二. 这个系列的文章都是采用"笔记+个人理解"的方式来写.会把比较重要的内容摘抄出来,同时有的地方也会谈谈个人理解. 作为第一篇,主要做一个angular入门,结合一个入门示例,了解一下如何构建An

[学姿势]使用AngularJS+CodeIgniter框架经验谈

这篇文章作为总结总结7月份参与项目时遇到的新东西和问题,包括这两个框架(CodeIgniter.AngularJS)以及两个功能实现.有前端调试显示动态认证,也有用php实现功能模块. 1.添加设备 主要使用AJS进行添加设备时的输入判断和表单验证的展示,在html标签使用ng-controller="adding_ctrl"来指明AJS代码的作用域.表单内的元素与AJS变量绑定,在$scope中使用ng-model属性的变量名来读取数据.把表单提交处理函数用php写好后,在需要调用的

跟我学AngularJs:Service、Factory、Provider依赖注入使用与区别

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka        本教程使用AngularJs版本:1.5.3        AngularJs GitHub: https://github.com/angular/angular.js/        AngularJs下载地址:https://angularjs.org/ 用有过Spring的人都知道,Spring的核心思想就是DI(依赖注入,Dependency Injection)和I

跟我学AngularJs:Directive指令用法解读(下)

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

写在学AngularJS之前

近来从不同途径听说AngularJS和MEAN stack,感觉很有趣的样子,于是准备抽时间来学习一下.在这里记录学习过程中的笔记. 简单整理一下先: 1. 我的学习资料: a) 官网 b) wikipedia c) 其他类型网站 d) 电子书 2. 关于术语: 之前上学都是看英文,中文也会看,但是专业术语真的记得不太好,之后的笔记里,有些如果是书上学来,可能翻译会有偏差(偏差到不忍直视),希望路过的高人可以指点. 3. 其他想到再继续改. Ok, here we go.