前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >AngularJs(3)

AngularJs(3)

作者头像
py3study
发布于 2020-01-14 04:10:25
发布于 2020-01-14 04:10:25
1.6K00
代码可运行
举报
文章被收录于专栏:python3python3
运行总次数:0
代码可运行

<!doctype html>

<html lang="en" ng-app='myApp' >

<head>

<meta charset="UTF-8">

<title>路由一</title>

<script type="text/javascript" src="angular.min.js"></script>

<script type="text/javascript" src="angular-route.min.js"></script>

<script type="text/javascript">

//在模块中的[]中引入ngRoute

var myApp = angular.module('myApp', ['ngRoute'])

//在配置中引入$routeProvider

myApp.config(['$routeProvider',function($routeProvider){

$routeProvider

//根据哈希值确定ng-view视图的内容

//:num获取传递过来的参数

.when('/aaa/:num',{

template : '<p>首页的内容</p>`name`',

controller : 'one'

})

.when('/bbb',{

template : '<p>分页一的内容</p>`name`',

controller : 'two'

})

.when('/ccc/:num',{

template : '<p>分页二的内容</p>`name`',

controller : 'three'

})

//设置默认值

.otherwise({

redirectTo :'/aaa'

});

}]);

 myApp.controller('one',['$scope','$location','$routeParams',function($scope,$location,$routeParams){

$scope.name='hello';

$scope.$location=$location;

//可以获取传递过来的参数

console.log($routeParams);

 }]);

 myApp.controller('two',['$scope',function($scope){

$scope.name='hi';

//$scope.$location=$location;

 }]);

  myApp.controller('three',['$scope','$routeParams',function($scope,$routeParams){

$scope.name='你好';

//$scope.$location=$location;

console.log($routeParams);

 }]);

</script>

</head>

<body ng-controller='one'>

<a href="" ng-click='$location.path("aaa/123")'>首页</a>

<a href="" ng-click='$location.path("bbb")'>分页一</a>

<a href=""  ng-click='$location.path("ccc/333")'>分页二</a>

<div ng-view></div>

</body>

</html>

代码语言:javascript
代码运行次数:0
运行
复制
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019/07/02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
AngularJs ng-route路由详解
本篇基于ng-route来讲下angular中的路由,路由功能主要是 $routeProvider服务 与 ng-view 实现。 ng-view的实现原理,是根据路由的切换,动态编译html模板——$compile(html)(scope)。 更多内容参考:Angularjs总结 前提 首先需要在页面引入angular和angular-route,注意要在angular-route之前引入angular <script src="../../bower_components/angular/an
用户1154259
2018/01/17
1.9K0
【AngularJS】 # AngularJS入门
ng-app 指令定义一个 AngularJS 应用程序。 若不声明,将直接显示表达式。
全栈程序员站长
2022/09/15
23.3K0
【AngularJS】 # AngularJS入门
AngularJS快速入门
记得第一次听说AngularJS这项很赞的Web的前端技术,那时还是2014年,年中时我们我的一个大牛兄弟当时去面试时,被问到了是否熟悉该技术,当时他了解和使用的技术比较多。我们询问他面试情况时,他给俺这个菜菜科普了该技术,印象比较深的是该技术支持前端MVC架构,可以完成大部分原有的后台工作,当时就觉得很神奇,但由于自身技术基础比较薄弱,没有太多时间和积累去学习新的技术,因而搁置了。在2016新年初始,正好有一些富余时间,正好学习下这个被称为就是“”两个大括号“”的前端框架(当前已经非常成熟,国内大部分公司
用户1216676
2018/01/24
2.6K0
AngularJS快速入门
AngularJS 路由--设置对象
$routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
陈不成i
2021/07/26
9560
Angular.js学习笔记(三)
1、uppercase,lowercase 大小写转换 {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING {{ "TANK is GOOD" | lowercase }} // 结果:tank is good 2、date 格式化 {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25 3、number 格式化(保留小数) {{149016.1945000 | number:2}}//保留两位 {{149016.1945000 | number}}//默认为保留3位 4、currency货币格式化 {{ 250 | currency }} // 结果:$250.00 {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00 5、filter查找 输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。 filter 过滤器从数组中选择一个子集 // 查找name为iphone的行 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | filter:{'name':'iphone'} }} 同时filter可以自定义比较函数。 6、limitTo 截取 {{"1234567890" | limitTo :6}} // 从前面开始截取6位 {{"1234567890" | limitTo :6,6}} // 从第6位开始截取6位 {{"1234567890" | limitTo:-4}} // 从后面开始截取4位 7、orderBy 排序 // 根据id降序排 {{ [{"age": 20,"id": 10,"name": "iphone"}, {"age": 12,"id": 11,"name": "sunm xing"}, {"age": 44,"id": 12,"name": "test abc"} ] | orderBy:'id':true }}
HUC思梦
2020/09/03
8.2K0
Angularjs 通过asp.net web api认证登录
Angularjs 通过asp.net web api认证登录 Angularjs利用asp.net mvc提供的asp.net identity,membership实现居于数据库的用户名/密码的认
阿新
2018/04/12
2.2K0
Angularjs 通过asp.net web api认证登录
angularjs学习第一天笔记
    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点评与赐教。谢谢!
小小许
2018/08/30
2.2K0
angularjs学习第一天笔记
前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
一、服务 AngularJS功能最基本的组件之一是服务(Service)。服务为你的应用提供基于任务的功能。服务可以被视为重复使用的执行一个或多个相关任务的代码块。 AngularJS服务是单例对象,
张果
2018/01/04
6.3K0
前端MVC学习总结(三)——AngularJS服务、路由、内置API、jQueryLite
todomvc-app
1、HTML 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <title>Template • TodoMVC</title> 7 <link rel="stylesheet" hre
半指温柔乐
2018/09/11
5480
AngularJS 中的 controllerAs
Controller 在 AngularJS 应用中可以说是无处不在, 可以在 html 中通过 ngController 指令来指定 Controller , 语法为:
beginor
2020/08/10
8920
AngularJS爬坑之路——路由关于路由的那点事儿
关于路由,首先想到的是生活中的路由器。 类似路由器,AngularJS中的路由其实也是一样的概念
大牧莫邪
2018/08/27
1.5K0
AngularJS 路由
通过 AngularJS 可以实现多视图的单页 Web 应用(single page web application,SPA)
陈不成i
2021/07/26
1.6K0
初次使用AngularJS中的ng-view,路由控制
AngularJS中的route可以控制页面元素的改变,使多页面变成一个单页面 第一步:引入必要的js: <script src="js/lib/angular.js"></script> <script src="js/lib/angular-animate.min.js"></script> <script src="js/lib/angular-route.min.js"></script> <script src="app.js"></script> 第二步:准备好一个单页: <body ng-a
Ryan-Miao
2018/03/13
1.6K0
angularjs 控制器、作用域、广播详解
一、控制器 首先列出几种我们平常使用控制器时的几种误区: 我们知道angualrJs中一个控制器时可以对应不同的视图模板的,但这种实现方式存在的问题是: 如果视图1和视图2根本没有任何逻辑关系,这样“
柴小智
2018/04/10
1.9K0
angularjs 控制器、作用域、广播详解
【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)
之前有写过一篇关于Angular自带的路由:ngRoute。今天来说说Angular的第三方路由:ui-router。那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router呢?这里简单明了的说明下ngRoute和ui-router的区别吧,其实也没很大的区别,主要的就是ngRoute针对于单视图,而ui-router可用于多视图(这里说的视图是指在页面内我们可控制的,可变化的区域)。比如:
用户5640963
2019/07/26
7.3K0
【ionic+angularjs】angularjs ui-router路由简介($urlRouter、$state、$stateProvider、ui-sref....)
3、Angular JS 学习笔记 – Controllers [翻译中]
在Angular中,一个控制器是一个javascript构造函数用于填充Angular作用域。
前Thoughtworks-杨焱
2021/12/08
2.5K0
【Hybrid开发高级系列】AngularJS(二)——常用$服务
        scope是angularJS中的作用域(其实就是存储数据的地方),很类似javascript的原型链 。搜索的时候,优先找自己的scope,如果没有找到就沿着作用域链向上搜索,直至到达根作用域rootScope。
江中散人_Jun
2023/10/16
4820
【Hybrid开发高级系列】AngularJS(二)——常用$服务
Angularjs 初步使用总结
IMWeb前端团队
2017/12/29
1.4K0
Angularjs 初步使用总结
AngularJS基础入门初探
  (2)由Misko Hevery 等人创建,2009年被Google所收购,用于其多款产品
Edison Zhou
2018/08/20
1.8K0
AngularJS基础入门初探
【Hybrid开发高级系列】AngularJS(一)——基础专题
  一向不喜欢追求刚刚新鲜出炉的事物的我,终于在node js出来一年后开始迈出脚步。
江中散人_Jun
2023/10/16
5910
【Hybrid开发高级系列】AngularJS(一)——基础专题
相关推荐
AngularJs ng-route路由详解
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文