angularjs知识点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.0/angular-route.min.js"></script>
<!--
ng-app 边界指令
{{}} 呈现指令
ng-model 信息指令 用于信息绑定
ng-bind 绑定指令
ng-init 初始化指令 :对边界内数据模型初始化 习惯放在BODY上 --> </head>
<body ng-app="myApp"> <ul>
<li><a href="#!home">首页</a></li>
<li><a href="#!liebiao">列表页</a></li> </ul> <!--显示页 把路由templateUrl 页面中的内容写到该DIV中 并加上控制类-->
<div ng-view> </div> <script>
var app = angular.module('myApp',['ngRoute']); //自定义服务
app.service('hexafy', function() {
this.myFunc = function (x) {
return x.toString(16);
}
}); //系统的服务不加$
// 图片和链接要加ng 指定
// <img ng-src="{{}}"/><a ng-href="{{}}"></a> app.controller('homeCon',function ($scope, $route) {
//$scope.$route = $route;
$scope.name = '这是首页';
$scope.add = function () {
alert('121212');
}
})
.controller('liebiaoCon',function ($scope, $route, $http,hexafy) {
//$scope.$route = $route;
$scope.name = '这是列表页';
$scope.add = function () {
alert('121212');
} //发送http服务
/*$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
});*/ //POST请求要加headers否则服务器接受不到
$http({
method: 'POST',
url: '/someUrl',
headers:{
"Content-Type":"application/X-www-form-urlencoded"
},
data:""//用字符串 不能用{}
}).then(function successCallback(response) {
// 请求成功执行代码
}, function errorCallback(response) {
// 请求失败执行代码
}); //过滤服务{{任意内容 | 过滤器}} //自定义过滤服务
app.filter('reverse', function() { //可以注入依赖
return function(text) {
return text.split("").reverse().join("");
}
});
//过滤筛选服务
// <li ng-repeat='pname in pnames | filter:filter_input'></li> //监听服务 $watch 不需要注入
//在控制器中可是随时使用 $scope.InputValue = '';
$scope.$watch('InputValue',function () {
//监听InputValue 变化就会触发 }) })
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/home',{
templateUrl: 'home.html',
controller: 'homeCon',
})
.when('/liebiao',{
templateUrl: 'liebiao.html',
controller: 'liebiaoCon',
})
.otherwise({
redirectTo:'/home'//默认页 只能用CODE
}); }]); </script> </body>
</html>
angularjs知识点的更多相关文章
- Ionic/Angularjs 知识点解析
Ionic/Angularjs 知识点解析 angular-ui-router(状态跳转) state的定义:(在app.js的config下配置) $stateProvider .state('ap ...
- 21、AngularJs知识点总结 part-3
1.选择框select 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,也可以使用ng-repeat 指令来创建下拉列表: 区别:ng ...
- 20、AngularJs知识点总结 part-2
1.作用域 当你在angularJs中创建控制器时,可以将$scope对象作为一个参数进行传递: scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用 ...
- 19、AngularJs知识点总结 part-1
1.AngularJs AngularJs是一款JavaScript开源库,由Google维护,用来协助单一页面应用程序: AngularJs的目标是通过MVC模式增强基于浏览器的应用,使开发和测试变 ...
- AngularJS1.X版本基础
AngularJS 知识点: DataBinding Providers Validators Directives Controllers Modules Expressions Factori ...
- AngularJS的小知识点
小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...
- 100%会用到的angularjs的知识点【新手可mark】
前言:下面我将整理出100%会到的angularjs的知识点,掌握这些知识点你基本上就可以独立完成一个angularjs的项目,前提是你有一定web开发的经验:1.了解基本的javascript的概念 ...
- AngularJS小知识点一
AngularJS是由谷歌公司及一个由开发者组成的个人社区共同打造.其主要优势在于帮助使用者在web应用程序中实现必要的动态视图.它是通过原生的MVC(模型-视图-控制器)功能来增强HTML. PS: ...
- AngularJS应用，常用数组知识点
AngularJS 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码“:true|false”, ...
随机推荐
- 用juery的ajax方法调用aspx.cs页面中的webmethod方法
首先在 aspx.cs文件里建一个公开的静态方法,然后加上WebMethod属性. 如: [WebMethod] public static string GetUserName() { //.... ...
- DQL、DML、DDL、DCL区别
DQL(data query language)数据查询语言 主要是由SELECT构成的查询语句 基本语法:select 字段名 from 表名 where 查询条件 DML(data manipul ...
- Visual Studio 2015 NuGet Update-Package 失败/报错：Update-Package : Unable to load the service index for source https://api.nuget.org/v3/index.json.
起因 为了用VS2015 community中的NuGet获取Quartz,在[工具]-[NuGet包管理器]-[程序包管理器控制台]中执行 Install-Package Quartz. 却报如下错 ...
- 克隆虚拟机+Linux互相登录+秘钥认证(四)
1.虚拟机右键管理_克隆 修改虚拟机名称后完成! 2.开机启动虚拟机 随时保存快照 3.开启两台虚拟机,进行互相登录切换!(W命令查看系统负载) 补充: IP登录: ssh IP: 例如:ssh 19 ...
- jquery 第五章 jQuery操作表单与表格
1.回顾 对象.bind("事件名称",function(){ // }) 阻止冒泡事件 return false, event stopProapagation() 模拟事件 ...
- java开发学生信息管理系统的实现（简洁易懂），适合计算机专业学生参考，课程设计、毕业论文设计参考等
编写一个简单的学生管理信息系统. 在oracle中设计一张学生表,以学号作为关键字. 其他学生信息有:姓名.手机号. 在进入系统时,显示如下菜单: ************************** ...
- fillder---工具栏隐藏/显示
显示隐藏工具栏方法:view---show toolbar
- SparkCore| 算子
RDD RDD(Resilient Distributed Dataset)叫做弹性分布式数据集,是Spark中最基本的数据抽象.代码中是一个抽象类,它代表一个弹性的.不可变.可分区.里面的元素可并行 ...
- ant gradle curl等工具原理以及使用记录
1.ant是早一些的java 项目配置管理工具. 2.gradle是比maven还新的项目配置管理工具. 3.curl可以方便进行网络测试.curl可以方便用来http请求测试,支持各种命令,从这个角 ...
- CF1037E. Trips
题目链接 CF1037E. Trips 题解 每次删点后,对不满足要求的点拓扑 代码 #include<map> #include<queue> #include<vec ...