Part 28 AngularJS default route
2016-05-15 03:17
721 查看
At the moment the problem is that, if you try to navigate to a route that is not configured, you will see only the layout page without any partial template injected into it.
For example if you navigate to http://localhost:51983/ABC, since ABC is not a configured route you will see the layout page (index.html) as shown below.
![](https://4.bp.blogspot.com/-yz9SES4_Tds/VtiuPrvWrqI/AAAAAAAAhEM/WTwkf7XtrIE/s1600/AngularJS%2Bdefault%2Broute.png)
You will also have this same problem if you navigate to the root of the site i.ehttp://localhost:51983. The reason angular is displaying the empty layout template in both these cases, is because it does not know what partial template to inject. We want angular to redirect to default route if the user is trying to navigate to a route that is not configured.
How to configure the default route in Angular : Well that is straight forward. All you need is the following line in config() function in script.js file
With the above change the code in config() function should be as shown below.
With this change if the user tries to navigate to a route that is not configured (http://localhost:51983/ABC) or just to the rooot URL (http://localhost:51983), the user will be automatically redirected to http://localhost:51983/home.
For example if you navigate to http://localhost:51983/ABC, since ABC is not a configured route you will see the layout page (index.html) as shown below.
![](https://4.bp.blogspot.com/-yz9SES4_Tds/VtiuPrvWrqI/AAAAAAAAhEM/WTwkf7XtrIE/s1600/AngularJS%2Bdefault%2Broute.png)
You will also have this same problem if you navigate to the root of the site i.ehttp://localhost:51983. The reason angular is displaying the empty layout template in both these cases, is because it does not know what partial template to inject. We want angular to redirect to default route if the user is trying to navigate to a route that is not configured.
How to configure the default route in Angular : Well that is straight forward. All you need is the following line in config() function in script.js file
.otherwise({ redirectTo: "/home" })
With the above change the code in config() function should be as shown below.
.config(function ($routeProvider, $locationProvider) { $routeProvider .when("/home", { templateUrl: "Templates/home.html", controller: "homeController" }) .when("/courses", { templateUrl: "Templates/courses.html", controller: "coursesController" }) .when("/students", { templateUrl: "Templates/students.html", controller: "studentsController" }) .otherwise({ redirectTo: "/home" }) $locationProvider.html5Mode(true); })
With this change if the user tries to navigate to a route that is not configured (http://localhost:51983/ABC) or just to the rooot URL (http://localhost:51983), the user will be automatically redirected to http://localhost:51983/home.
相关文章推荐
- Part 27 Remove # from URL AngularJS
- [AngularJS面面观] 2. scope中的Dirty Checking(脏数据检查) --- Digest Cycle
- AngularJS中,联合使用ng-repeat和ng-if,可以实现对数据删选显示效果,特别适合于用作表单数据的显示
- angularjs-表单验证
- angular中重要指令介绍($eval,$parse和$compile)
- 深究AngularJS——过滤器(filter)
- angularJS指令参数详解
- angularJs中ngModel的坑
- 深究AngularJS——自定义服务详解(factory、service、provider)
- Angularjs中UI Router的使用方法
- AngularJS控制器controller如何通信?
- 深究AngularJS——排序
- Part 23 to 26 Routing in Angular
- AngularJS在IE8的不支持的解决方法
- AngularJS 指令编译原理
- AngularJS与单选框及多选框的双向动态绑定
- 深究AngularJS——$sce的使用
- Yeoman构建AngularJs应用初步
- 深究AngularJS——校验(非form表单)
- angularjs 解决之前的遗留的一个问题