Angular.js入门的样例
感觉这下子，前端的路也宽多了，从容不迫了。
因为可控制的节点又推前了，
有空了好好学一下。
然后结合EXPRESS或METEOR，是不是有点爽？
参考URL：
https://toddmotto.com/ultimate-guide-to-learning-angular-js-in-one-day/
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="js/angular.min.js"></script>
<script src="js/script.js"></script>
</head>
<body ng-app="myApp">
<div >
<div ng-controller="MainCtrl">
{{ text }}
<p> {{ data1.length > 0 && 'My data' || 'No data' }} </p>
<p> {{ data2.length > 0 && 'My data' || 'No data' }} </p>
<ul>
<li ng-repeat="number in numbers | filter:oddNumber">
{{ number }}
</li>
<input type="text" ng-model="myModel" placeholder="Start typing..." />
<p>My model data: {{ myModel }} </p>
<li ng-repeat="number in numbers | filter:greaterThanNum">
{{ number }}
</li>
</ul>
</div>
<div ng-controller="XHRCtrl">
{{ ubb.ubbname }}
<a href="" ng-click="toggle = !toggle">Toggle nav</a>
<ul ng-show="toggle">
<li>LINK 1</li>
<li>LINK 2</li>
<li>LINK 3</li>
<li>LINK 4</li>
</ul>
</div>
<div ng-controller="EmailCtrl">
<ul>
<li ng-repeat="message in emails.messages">
<p>From: {{ message.from }}</p>
<p>Subject: {{ message.subject }}</p>
<p>{{ message.sent | date:'MMM d, y h:mm:ss a' }}</p>
<a ng-click="deleteEmail($index)"> Delete email </a>
</li>
</ul>
</div>
<div ng-controller="MathCtrl">
{{ result }}
</div>
<div ng-controller="FacCtrl">
{{ result }}dgf
</div>
<div ng-controller="FilCtrl">
<p>No filter: {{ greeting }}</p>
<p>Reverse: {{ greeting | reverse }}</p>
</div>
<div ng-controller="UserCtrl">
<p class="username"> Welcome, {{ user.details.username }} </p>
<p class="id">User ID: {{ user.details.id }} </p>
</div>
<a custom-button>Click me</a>
</div>
</body>
</html>
js
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
$scope.text = "Heloo, Angular fanitic.";
$scope.numbers = [10, 25, 35, 45, 60, 80, 100];
$scope.lowerBound = 42;
$scope.greaterThanNum = function(item) {
return item > $scope.lowerBound;
};
$scope.myModel = '';
$scope.data1 = [];
$scope.data2 = "my dole data";
}]);
myApp.controller('XHRCtrl', ['$scope', '$http', function($scope, $http) {
$scope.ubb = {};
$scope.ubb.ubbname = '';
$http({
method: 'GET',
URL: 'http://127.0.0.1/templates/customButton.html'
})
.success(function(data, status, headers, config) {
$scope.ubb.ubbname = 'from ajax data';
})
.error(function(data, status, headers, config) {
$scope.ubb.ubbname = 'from ajax error data';
});
}]);
myApp.controller('EmailCtrl', ['$scope', function($scope) {
$scope.emails = {};
$scope.emails.messages = [{
"from": "Steve Jobs",
"subject": "I think I'm holding my phone wrong.",
"sent": "2015-12-01T08:05:59Z"
}, {
"from": "Ellie Goulding",
"subject": "I got Starry Eyes. lulz",
"sent": "2015-11-01T08:05:59Z"
},{
"from": "Michal Stipe",
"subject": "Everybody hurts, simteime",
"sent": "2015-11-05T08:05:59Z"
}];
$scope.deleteEmail = function(index) {
$scope.emails.messages.splice(index, 1);
};
}]);
myApp.controller('UserCtrl', ['$scope', function ($scope) {
$scope.user = {};
$scope.user.details = {
"username": "Chen Gang",
"id": "8910112"
};
}]);
myApp.service('Math', function() {
this.multiply = function(x, y) {
return x * y;
};
});
myApp.controller('MathCtrl', ['$scope', 'Math', function($scope, Math) {
var a = 12;
var b = 245;
var result = Math.multiply(a, b);
$scope.result = result;
}]);
myApp.factory('Server', ['$http', function($http) {
return {
get: function(URL) {
return $http.get(URL);
},
};
}]);
myApp.controller('FacCtrl', ['$scope', 'Server', function($scope, Server) {
var jsonGet = 'http://127.0.0.1/templates/customButton.html';
Server.get(jsonGet);
}]);
myApp.filter('reverse', function() {
return function(Input, uppercase) {
var out = '';
for(var i = 0; i < Input.length; i++) {
out = Input.charAt(i) + out;
}
if(uppercase) {
out = out.toUpperCase();
}
return out;
}
});
myApp.controller('FilCtrl', ['$scope', function($scope) {
$scope.greeting = 'Todd Motto';
}]);
myApp.directive('customButton', function() {
return {
restrict: 'A',
replace: true,
transclude: true,
template: '<a href="http://www.baidu.com" class="myawesomebutton" ng-transclude>' +
'< i class="icon-ok-sign"><i>' +
'</a>',
link: function(scope, element, attrs) {
}
};
});
截图：
Angular.js入门的样例的更多相关文章
- 【Unity 3D 游戏开发】Unity3D 入门 - 工作区域介绍 与 入门演示样例
一. 工作区域具体解释 1. Scence视图 (场景设计面板) scence视图简单介绍 : 展示创建的游戏对象, 能够对全部的游戏对象进行 移动, 操作 和 放置; -- 演示样例 : 创建一个球 ...
- Angular.js 入门（一）
最近在学习angular.js,为此方便加深对angular.js前端框架的理解,因此写下这篇angular.js入门 首先介绍下什么是angular.js? AngularJS 是一个 JavaSc ...
- 移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
- Angular.js入门
一.引入angular.js <script type="text/javascript" src="../plugins/angularjs/angular.m ...
- Angular.js入门教程
简单介绍 AngularJS是为了克服HTML在构建应用上的不足而设计的.首先Html是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了. 通常,我们可以通过以下技术来解 ...
- angular.js 入门
1.安装nodejs 首先要安装nodejs,如果你的电脑已经装过了,最好确认是比较新的版本,否则可能会出问题. 没有安装的直接去nodejs官网下载nodejs安装.安装过程很简单,官网有教程. 安 ...
- 一些常用的js，jquerry 样例
1 设置属性 $(document).attr("title", str) 2 删除属性在增加属性 $("#" + bottonname).remo ...
- Angular JS + Express JS入门搭建网站
3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...
- Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- LeftOuterJoin和OuterApply性能比较(转)
建立测试环境: 建立一个表Department和Employee,并向Department插入50W条记录,向Employee插入200W条记录, 我们就拿[统计DepartmentID 从15000 ...
- ### 学习《C++ Primer》- 9
Part 9: 模板与泛型编程(第16章) // @author: gr // @date: 2016-03-18 // @email: forgerui@gmail.com 1. 模板参数 类型模板 ...
- iOS开发--UIKit控件之UISearchBar(搜索栏)
今天因为需求原因,需要用到搜索控件:之前一直没有用到过这个控件,所以去百度了一下,找到一篇可以说很齐全的资料,感谢这位作者. 然而,我并没有找到可以更改字体大小的属性或方法,希望有知道的告诉我一声,谢 ...
- OC3-父类指针指向子类对象
// // Cat.h // OC3-父类指针指向子类对象 // // Created by qianfeng on 15/6/17. // Copyright (c) 2015年 qianfeng. ...
- dorado7 重装了tomcat后配置路径
在Windows->Preferences->Server->Runtime Environments把先前的工程Servers删除掉
- Adobe Photoshop CS4 Extended CS4 激活序列号
Adobe Photoshop CS4 Extended CS4 激活序列号(SN):1330-1779-4488-2103-6954-09161330-1170-1002-7856-5023-077 ...
- Mysql配置文件my.cnf解析
# vim /etc/my.cnf [client] port = 3306 //客户端所连接的端口号 socket = /tmp/mysql.sock //客户端所连接的sock文件存放位置 [my ...
- Mysql创建函数时报错
先去查询 show variables like '%func%' ; 这个语句,如果该语句最后输出的值是OFF 那么就用下面的语句去修改就可以:set global log_bin_trust_f ...
- linux环境下配置github远程仓库
1.设置git用户和邮箱 git config --global user.name "fujinzhou" git config --global user.email &quo ...
- Laravel Homestead安装教程
1/先在https://www.vagrantup.com 下载vagrantup ,对应平台下载,并安装,安装后可以在命令行使用vagrant https://www.vagrantup.com/ ...