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(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- Oracle表空间操作
-- 查看表空间 SELECT tablespace_name, file_id, file_name, ), )||'M' total_space FROM dba_data_files ORDER ...
- autolayout高度动态改变的一些体会
autolayout这个东西就不在此说明了,网上已经有很多大神做了很详细的讲解,自己也看了不少好文章,在这里只是想记录一下自己初步的一些认识与体会,这个东西毕竟还是很强大,如果要用到更高级的用法还得在 ...
- Today’s words
transcendental,transcendental capacity commission,the commission would keep venetian unimodel transi ...
- asp.net中的Application概述
全局应用程序类 从Application这个单词上大致可以看出Application状态是整个应用程序全局的.在ASP时代我们通常会在Application中存储一些公共数据,而ASP.NET中App ...
- [zz]pg_hba.conf 一种安全地配置策略
PostgreSQL默认只监听本地端口,用netstat -tuln只会看到“tcp 127.0.0.1:5432 LISTEN”.修改postgresql.conf中的listen_address= ...
- maven入门程序(二)
这里就使用myeclipse简单创建一个实例程序. 一.创建项目 在myeclipse中创建项目选Maven Project,然后直接下一步用默认的项目空间.在archetype中选择quicksta ...
- Poj OpenJudge 百练 2632 Crashing Robots
1.Link: http://poj.org/problem?id=2632 http://bailian.openjudge.cn/practice/2632/ 2.Content: Crashin ...
- WMB代理无法正常启动时的解决方案。
情况:执行了启动命令,查看状态的时候 还是停止..再启动,又说已经启动了.. 解决方案:正常情况在hosts文件加一条记录:主机IP和hostname的映射关系就好了
- 如何解决NTLDR is missing
问题:ntldr文件不见了,无法进入系统.本系统win XP 简体中文32位 解决步骤: (1)我找来一张win XP 英文版 32位的系统光盘(用U盘驱动也行) (2)重新启动计算机,并进入CMOS ...
- soinn
Growing Cell Structures A Self-Organizing Network for Unsupervised and Supervised Learning Here, and ...