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(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
随机推荐
- iOS开发——根据Url 获取图片尺寸
转自:http://www.oschina.net/code/snippet_2248391_53038 // 根据图片url获取图片尺寸 +(CGSize)getImageSizeWithURL:( ...
- IOS TextField设置大全
//初始化textfield并设置位置及大小 //设置边框样式,只有设置了才会显示边框样式 text.borderStyle = UITextBorderStyleRoundedRect; ...
- 移动端高清、多屏适配方案 [来源：http://div.io/topic/1092]
Lovesueee 发布于 8 月前 移动端高清.多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视 ...
- requirejs实验001.对我来说,用AMD的方式来组织代码并不轻松.
http://www.requirejs.org/ http://www.requirejs.cn/ http://requirejs.readthedocs.org/en/1.0.1/ 目录结构: ...
- new失败判断
使用 malloc/calloc 等分配内存的函数时,一定要检查其返回值是否为空;但是C++ 里,如果 new 分配内存失败,默认是抛出bad_alloc异常,不会返回空:但是有些编译器对c++标准支 ...
- =====关于swing的一些收集-swing大收集======
一篇经典的 介绍netbeans中swing 应用程序框架的文章 http://blog.csdn.net/tangwing/article/details/5745075 Swing外观框架 Bea ...
- DTCMS视频模版更改，
1.去掉style.css中视频的高度 .video-box{ position:relative; width:100%; height:473px; _clear:both; _display:i ...
- 【转】c#文件操作大全（二）
61.文件夹移动到整合操作 FolderDialog aa = new FolderDialog(); aa.DisplayDialog(); if (aa ...
- Notepad++ 运行脚本快捷键设置
php:cmd /k /path/to/php.exe "$(FULL_CURRENT_PATH)" & ECHO. & PAUSE & EXIT pyth ...
- Canvas使用笔记
1.Canvas画布有外部尺寸和内部尺寸,外部尺寸是指画布在html页面里的大小,内部尺寸是指画布内部像素的值.一般默认是在下面这句 <canvas id="myCanvas" ...