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(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- Unity 5.4大赞：HTC Vive经典The lab渲染器开源
HTC Vive提供了一个不错的免费VR demo,最近1周仔细体验了一番. 仔细看了其安装文件,竟然是Unity 5.4beta版本(通过查log,知道Valve公司用的是最新的5.4.0b11版本 ...
- 第六十五篇、OC_iOS7 自定义转场动画push pop
自定义转场动画,在iOS7及以上的版本才开始出现的,在一些应用中,我们常常需要定制自定义的的跳转动画 1.遵守协议:<UIViewControllerAnimatedTransitioning& ...
- Swift协议（Protocol）
协议是为方法.属性等定义一套规范,没有具体的实现. 协议能够被类.结构体等具体实现(或遵守). protocol SomeProtocol { // protocoldefinition goes h ...
- (转)实战Memcached缓存系统（1）Memcached基础及示例程序
1.Cache定义 (1)狭义概念:用于CPU的相对高速处理与主存(Main Memory)的相对低速处理的之间起到协调功能的硬件设备. (2)广义概念:用于速度相差较大的两种硬件之间,起到协调两者数 ...
- 老老实实学习WCF[第二篇] 配置wcf
老老实实学WCF 第二篇 配置WCF 在上一篇中,我们在一个控制台应用程序中编写了一个简单的WCF服务并承载了它.先回顾一下服务端的代码: using System; using System.Col ...
- 考虑virtual函数以外的其它选择
详情见<Effective C++>item35 1.使用non-virtual interface(NVI)手法,这是Template Method设计模式的一种特殊形式. 它以publ ...
- C语言中格式化输出的转换说明的fldwidth和precision解析
首先说什么是C语言的格式化输出,就是printf和它的几个变种(grep -E "v?(sn|s|f)printf").像这些函数都有一个参数format,format中可以加点转 ...
- c#中的枚举
1.枚举概念:枚举是用户定义的整型类型,在声明一个枚举时,要指定该枚举的实例可以包含的一组可接受的值,还可以给值指定易于记忆的名称.如果在代码的某个地方,要试图把一个不可接受范围内的值赋予枚举的一个实 ...
- Brackets - 又一款牛x的WEB开发编辑器
Brackets官网下载: http://brackets.io/ Adobe Brackets是由Adobe主导开发一款主打web开发的编辑器. 是继TextMate,Sublime Text这两个 ...
- ECSHOP如何解决购物车中商品自动消失问题
最近有客户反映关于ECShop购物车的问题:需要加入多个商品到购物车时,发现之前加入到购物车的商品都自动消失了,只有最后一次加入购物车的商品在里面.那么,这是什么原因呢? 因为ECShop的SESSI ...