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的最大作用,这几天项目 ...
随机推荐
- MySQL性能优化的20+条经验
1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一 ...
- Raspberry 安装vstudio
Visual Studio Code微软公司推出的一款轻量级的Visual Studio风格的跨平台的IDE.当然,除了Windows,OSX,还能在树莓派上使用.目前树莓派上可用的IDE真不多,VS ...
- JDBC URL格式定制
数据库URL制定: 当加载的驱动程序,可以建立程序中使用DriverManager.getConnection()方法的连接.为方便参考,让列出了三个重载DriverManager.getConnec ...
- IIS并发连接数限制
- Oracle归档模式和非归档模式的区别
一.查看oracle数据库是否为归档模式: Sql代码1.select name,log_mode from v$database; NAME LOG_MODE ------------------ ...
- vscode环境配置
"go.goroot": "/home/ken/go", "go.gopath": "/home/ken/gopath" ...
- js 巧妙去除数组中的重复项
1.代码如下: var toObject = function(a) { var o = {}; for (var i=0, j=a.length; i<j; i=i+1) { // 这里我调整 ...
- Android中的this、Activity、Context等
Android中的this.Activity.Context.Application等虽然有相似之处,但是不能乱用,每一个都有自己的特点.用的时候不能太随意了. 避免context相关的内存泄露,注意 ...
- Day03——Python函数
函数定义和使用 1.语法 def 函数名(参数): ... 函数体 ... 返回值 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日后根据函数名调用函数 函数体:函数中进行 ...
- WPF DatePicker日期控件只显示年月
1.需要引用2个类,第一个类DatePickerCalendar public class DatePickerCalendar { public static readonly Dependency ...