AngularJS路由未能加载视图。

16 浏览
0 Comments

AngularJS路由未能加载视图。

我的项目结构如下：

\"project

我尝试使用这张图片创建一个单页应用程序。当index.html页面启动时，它默认会在ng-view中加载registration.html。但是当index.html加载时，它没有像预期的那样在ng-view中加载registration.html。

我的index.html、main.css和mainAppRouter.js文件如下：

//mainAppRouter.js
(function () {
    var myModule = angular.module('studentInfo', ['ngRoute']);
    myModule.config(function ($routeProvider) {
        $routeProvider
            .when('/registration', {
                templateUrl : '../views/registration.html',
                controller: 'regController'
            })
            .otherwise({
                redirectTo: '/registration'
            });
        console.log("checking");
    });
    myModule.controller('regController', function ($scope) {
        $scope.message = 'This is Add new order screen';
        console.log("checking");
    });
});

/*man.css*/
.studentInfo{
    margin-top: 100px;
}
.navbar{
    padding: 1em;
}
.navbar-brand {
  padding:0;
}





    
    
    
    


                  Student Info

 

 

 

Student Info

 





我的所有代码都在这个github存储库中。


我应该怎么做才能纠正我的问题？

								
admin 更改状态以发布 2023年5月21日
							

							

															

						

						
0

					

				


			


			
			

	

		

			

				1
				答案			


					


		
		

			
				
											


	

		

			

								
									
			

			

				

					

						

                        

						

														0 Comments						

					

					

															

				

				

										
我认为问题是因为您没有为ng-view指定任何控制器，您还必须正确设置您的基本URL。




 $routeProvider
            .when('/registration', {
              templateUrl :'http://localhost/StudentInfo/app/views/registration.html',
                controller: 'regController'
            })





并从HTML中删除控制器标签。您的控制器标签超出了ng-view的范围。




  
            
Student Info






并且您的控制器中也存在语法错误




myModule.controller('regController', function ($scope){
    $scope.message = 'This is Add new order screen';
})





更新的答案: 这也是为什么这不起作用的另一个原因是您正在文件系统上运行示例（使用file://协议），许多浏览器（Chrome，Opera）在使用file://协议时限制XHR调用。 AngularJS模板通过XHR下载，这与使用file://协议的使用相结合导致您获得的错误。


详细信息：无法使用Angularjs的templateUrl加载模板

									

				

									

			

			
0