Angular.js-2入门
1.angular与MVC
MVC即Model View Controller，是模型(model)-视图(view)-控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。
M 模型对应数据库
V 视图对应HTML页面
C 控制器处理用户交互
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<style>
body {
padding: 10px;
}
</style>
<body ng-app="app">
<div ng-controller="MyCtrl">
<input type="text" ng-model="msg"/>
<h1>{{msg}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])//module创建一个angular模块
.controller('MyCtrl',function($scope){//controller相当于简单的MVC，MyCtrl相当于C,$scope相当于M
$scope.msg="angular";//每一个模型，通过双向绑定，把模型绑定到V上即HTML页面
})
.controller('MyCtrl1',function($scope){})//可以创建更多
.controller('MyCtrl2',function($scope){})
.controller('MyCtrl3',function($scope){});
</script>
</html>
2.binding双向绑定
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="">
<div>
<input type="text" ng-model="uname"/>
<h1 ng-bind="uname">{{}}</h1><!--显示输入框内容-->
<h1 ng-clock class="ng-clock">{{uname}}</h1><!--显示输入框内容-->
<!--{{}}内可放置任何表达式-->
<div ng-bind="'用户名:'+uname"></div><!--显示：用户名:button-->
<div class="{{uname}}">{{uname}}</div><!--显示button标签-->
</div>
</body>
<script src="js/angular.min.js"></script>
</html>
3.controller的使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding: 10px" ng-app="app">
<div ng-controller="FirstCtrl">
<!--<h1>{{msg}}</h1>同ng-bind且可省去{{}}-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<div ng-controller="NextCtrl">
<!--<h1>{{msg}}</h1>-->
<h1 ng-bind="msg"></h1>
<input type="text" ng-model="msg"/>
</div>
<!--ng-controller明确其作用域边界-->
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('FirstCtrl',function($scope){
$scope.msg="hello angular";
})
.controller('NextCtrl',function($scope){
$scope.msg="hello 极客";
}); </script>
</html>
4.scope的变量与方法
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px;" ng-app="app">
<p>在scope上定义方法并在页面上进行绑定调用</p>
<p>在scope上定义变量并在方法中使用</p>
<div ng-controller="MyCtrl">
<!--<input type="text" ng-model="msg"/>-->
<!--<h1>{{reverse()}}</h1>-->
<!--在页面上绑定调用scope中定义的方法-->
<input type="text" ng-model="user.uname"/>
<input type="text" ng-model="user.pwd"/>
<div class="button" ng-click="login()">登录</div>
<div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.controller('MyCtrl',function($scope){
$scope.msg="";
$scope.user={uname:'',pwd:''};
$scope.errormsg="";
$scope.reverse=function(){//在scope上定义方法
return $scope.msg.split("").reverse().join("")
};
$scope.login=function(){
if($scope.user.uname=="admin" && $scope.user.pwd=="123"){
alert("登陆成功");
}else{
$scope.errormsg="用户名或密码错误";
}
}
}); </script>
</html>
5.定义service服务
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<div ng-controller="MyCtrl">
<h1>{{realname}}</h1>
<h1>{{http}}</h1>
<h1>{{data.msg}}</h1>
<h1>{{uname}}</h1>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
//service多种表现形式，四种创建模式value（值可改变） constant(常量不可改变) factory service provider（高级）
.value('realname','zhaoliu')
.value('realname','wangwu')
.constant('http','www.baidu.com')
.constant('http','www.sohu.com')
.factory('Data',function(){
return {
msg:'你好吗',
setMsg:function(){
this.msg="我不好";
}
}
})
.service('User',function(){
this.firstname="上官";
this.lastname="小子";
this.getName=function(){
return this.firstname+this.lastname;
}
})
.controller('MyCtrl',function($scope,realname,http,Data,User){
$scope.realname=realname;
$scope.http=http;
$scope.data=Data;
Data.setMsg();
$scope.uname=User.getName();
}); </script>
</html>
6.在controller中使用service服务
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css">
</head>
<body style="padding:10px" ng-app="app">
<p>service:如何在多个controller中共享数据</p>
<div ng-controller="FCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
<div ng-controller="SCtrl">
<input type="text" ng-model="data.msg"/>
<h2>{{data.msg}}</h2>
</div>
</body>
<script src="js/angular.min.js"></script>
<script>
angular.module('app',[])
.factory('Data',function(){
return {
msg:'我来自factory'
}
})
.controller('FCtrl',function($scope,Data){
$scope.data=Data;
})
.controller('SCtrl',function($scope,Data){
$scope.data=Data;
});
</script>
</html>
6.常用指令可查看官方文档api
Angular.js-2入门的更多相关文章
- Angular JS从入门基础 mvc三层架构 常用指令
Angular JS从入门基础 mvc模型 常用指令 ★ 最近一直在复习AngularJS,它是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心 ...
- angular.js简单入门。
小弟刚接触angular js 就写了一个简单的入门.后续慢慢补... 首先看 html 页面. <html> <meta charset="UTF-8"> ...
- angular.js快速入门 hello world
我们整个系列的学习会去写一个简单blog雏形,如果有精力再完善美化. 但是这篇还是要从HelloWorld开始学习. angular.js 文件加载我们选用 bootstrap中文网提供的一个cdn服 ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- Angular.js 入门（一）
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- Angular.js入门
一.引入angular.js <script type="text/javascript" src="../plugins/angularjs/angular.m ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序（SPA）（谷歌翻译）
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
- 新手入门学习angular.js的心得体会
看了一天的angular.js,只要记住这是关于双向数据绑定 和单向数据绑定就可以,看看开发文档,短时间内还是可以直接入手的,看个人理解能力(我是小白). 这几天开始着手学习angularjs的有关知 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- Angular JS 学习笔记(自定义服务：factory，Promise 模式异步请求查询:$http,过滤器用法filter，指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
随机推荐
- Android 集成百度统计
在这里简单的介绍下怎么统计自己研发的APP 的用户活跃度,和使用量,以此来展示自己APP的用户使用量! 我们的APP都需要注入数据分析,以供我们实时的了解APP的下载和使用量提供了依据! 不过我还是更 ...
- Python3.5 使用Sqlite3
-------------------- 修雨轩陈@cnblog Python3.5 使用Sqlite3 python3.5 安装的时候会有很多可选参数,这些参数是默认不提供的,可是当我们想通过pip ...
- qt中qlineedit和qtextedit右键菜单翻译成中文
没有linguist和lupdate等命令需要安装Linguist: 在Terminal中输入: sudo apt-get install qt4-dev-tools qt4-doc qt4-qtco ...
- 通过游戏学敏捷：只通过Specification来传递需求
转自:https://mp.weixin.qq.com/s/jAYbAMUTNYGh4RxGPAZ1AQ 活动把每个小组(4-5个人)中的2人留在屋子里,其他人到屋子外面等待.在屋子里的人,会得到一张 ...
- Congestion Avoidance in TCP
Congestion Avoidance in TCP Consequence of lack of congestion control When a popular resource is sha ...
- 【NLP_Stanford课堂】语言模型4
平滑方法: 1. Add-1 smoothing 2. Add-k smoothing 设m=1/V,则有 从而每一项可以跟词汇表的大小相关 3. Unigram prior smoothing 将上 ...
- git-day1-安装和基础使用
Git介绍 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件 ...
- 使用Fragment填充ViewPager
在上一篇文章中,讲解了使用PagerAdapter作为适配器时的ViewPager的使用方法.然后在实际项目中更多的使用Fragment作为页卡,因为实际开发中每一个页卡要复杂的多.而使用Fragme ...
- django get_object_or_404
django get_object_or_404 是django shortcuts模块里面一个比较简便的方法,特别是用django get来操作数据库的时候,可以帮 我们少写一些代码,加快开发速度. ...
- sqlserver 2008 r2 直接下载地址，可用迅雷下载
转自 http://www.cnblogs.com/chinafine/archive/2010/12/23/1915312.html sqlserver 2008 r2 直接下载地址,可用迅雷下载 ...