Angular JS ng-view
[英]Angular JS ng-view
问题描述
我目前正在尝试构建一个角度js菜单这里是我的代码我似乎无法让页面加载。 我错过了什么吗？ 我是否包含了所需的所有正确脚本。 角度很新。
// create the module and name it scotchApp var scotchApp = angular.module('RoutingApp', ['ngRoute']); // configure our routes scotchApp.config(function($routeProvider) { $routeProvider // route for the home page .when('/', { templateUrl: 'http://www.habboholiday.net/pages/home.html', controller: 'mainController' }) // route for the about page .when('/about', { templateUrl: 'pages/about.html', controller: 'aboutController' }) // route for the contact page .when('/contact', { templateUrl: 'pages/contact.html', controller: 'contactController' }); }); // create the controller and inject Angular's $scope scotchApp.controller('mainController', function($scope) { // create a message to display in our view $scope.HomeMessage = 'Home Controller Called !!!'; }); scotchApp.controller('aboutController', function($scope) { $scope.AboutMessage = 'About Controller Called !!!'; }); scotchApp.controller('contactController', function($scope) { $scope.ContactMessage = 'Contact Controller Called !!!'; });
<!DOCTYPE html> <!-- define angular app --> <html ng-app="RoutingApp"> <head> <!-- SPELLS --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script> <script src="script.js"></script> </head> <body ng-controller="mainController"> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/"> Angular Routing Example </a> </div> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-home"></i>Home</a></li> <li><a href="#about"><i class="fa fa-shield"></i>About</a></li> <li><a href="#contact"><i class="fa fa-comment"></i>Contact</a></li> </ul> </div> </nav> <div id="main"> <!-- angular templating : This is where content will be injected --> <div ng-view></div> </div> </body> </html>
2 个解决方案
解决方案1
0 2016-09-07 09:14:42
我猜你错过了ng-app指令。 将其添加到您的HTML并尝试。
解决方案2
0 已采纳 2016-09-07 09:18:01
您需要将ng-app添加到您的html元素中
<html ng-app="RoutingApp">
....
</html>
此外，您可以将Angular脚本引用移动到正文的底部，或者它们至少应包含在<head>标记内
在angular js中抓取ng-view
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.