I am facing some problem while making app with angularJS - stateProvider.
I got Uncaught Error: [$injector:modulerr]
and yes, I am working on CI framework.
Here is my code:
index.php
<html lang="en" data-ng-app="myApp">
<head></head>
<body>
<div data-ui-view=""></div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
></script>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"
></script>
<script src="/js/app.js"></script>
</html>
app.js
"use strict";
var myApp = angular.module("myApp", ['ui.router']);
myApp.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.when("", "/home");
$stateProvider
.state("home", {
url: "/home",
templateUrl: 'home/main'
})
});
There is a working plunker
You have to reference UI-Router code:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
// this is not path to UI-Router
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>-->
<script
src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"></script>
(we do not need angular-router, but UI-Router)
Check here that your code will be working, once it gets the UI-Router into play
Related
I am trying to use routing in Cordova but is not working. All js files are in www file.
Controllers are working. When I try in url to write:
http://localhost:8000/info
it says error
Cannot GET /info
I think I write in code everything correctly.
In html inside head I have put the:
<base href="/"/>
also the name module project and in body:
<ng-view></ng-view>
<script type="text/javascript" src="/js/angular.min.js"></script>
<script type="text/javascript" src="/js/angular-route.min.js"></script>
<script type="text/javascript" src="/js/angular-animate.min.js"></script>
<script type="text/javascript" src="/js/angular-aria.js"></script>
<script type="text/javascript" src="/js/angular-messages.min.js"></script>
<script type="text/javascript" src="/js/angular-material.min.js"></script>
<script type="text/javascript" src="/js/fontawesome5/fontawesome-all.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script src="/js/controllers/MainController.js"></script>
<script src="/js/controllers/InfoController.js"></script>
In my app.js file
var app = angular.module('project', ['ngRoute', 'ngMaterial', 'ngMessages']);
in routes.js (the below alert it didn't works):
app.config(["$routeProvider", "$locationProvider", function($routeProvider, $locationProvider){
alert('routes working!');
$routeProvider
.when("/", {
templateUrl: "views/login.html",
controller: "MainController"
})
.when("/info", {
templateUrl: "views/info.html",
controller: "InfoController"
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
in InfoController:
app.controller("InfoController", ["$scope","$http",function($scope,$http){
$scope.info = "info page here!";
}]);
What am I missing and it isn't working? What to try for debug?
Any suggestions?
I was forgotten to put in html the routes.js file:
<script type="text/javascript" src="/js/routes.js"></script>
Now everything works!
I don't manage to route using ui-router. It does work for me with ng-route, so I must have missed something basic. There is no error but I don't get any view.
The following code does not work (except for the otherwise statement):
angular.module("employeesApp", ["ui.router"])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('employeeList', {
url: "/employees",
templateUrl: "components/employee_list/employeeListView.html",
});
$urlRouterProvider.otherwise("/employees");
});
The following code does work:
angular.module("employeesApp", ["ngRoute"])
.config(function ($routeProvider) {
var employeeListRoute = {
templateUrl: "components/employee_list/employeeListView.html"
};
var otherwiseRoute = employeeListRoute;
$routeProvider
.when("/employeeList", employeeListRoute)
.otherwise(otherwiseRoute);
Here is my index.html (omitted not relevant elements):
<!DOCTYPE html>
<html lang="en" ng-app="employeesApp">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
<script src="app.route.js"></script>
<script src="components/employee_list/employeeListCtrl.js"></script>
</head>
<body>
<div>
<ng-view />
</div>
</body>
</html>
What am I doing wrong when trying to use ui-router?
As #AminMeyghani already said, you should be using ui-view instead of ng-view directive to get router know that relative view should be loaded inside ui-view directive
<div>
<ui-view></ui-view>
</div>
Demo here
So I'm new to Angular and I've been struggling all day to get ngRoute to work without any success. So I decided to try out the ui-router but that's not working for me either.
(angularjs 1.5.0)
index.html
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My app</title>
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular-ui-router.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div ui-view></div>
<a ui-sref="state1">State hello</a>
<a ui-sref="state2">State show</a>
</body>
</html>
main.js
var myApp = angular.module('myApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider)
{
$urlRouterProvider.otherwise("/state1");
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/hello.html"
})
.state('state2', {
url: "/state2",
templateUrl: "partials/show.html"
});
});
hello.html & show.html
<div>{{"hello"}}</div>
When loading index.html I get this error:
angular.min.js:6 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=MyApp&p1=Error%3A%2…
You're using wrong module name.
<html ng-app="MyApp">
var myApp = angular.module('myApp', ['ui.router']);
Change your module name to "MyApp" in your js file. i.e.
var myApp = angular.module('MyApp', ['ui.router']);
I can't get $routeProvider to work correctly anymore. I got a skinned down version of the situation as a Plunker see:
http://plnkr.co/edit/7G9WnT5i4qA01icAUAY5?p=preview
This is app.routes.js
angular.module('app.routes', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'home.html',
controller: 'homeController'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
It should load the template home.html but nothing happens.
I am using angular-route after angular and using ng-view in the index.html.
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#2.0.0-alpha.31" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/2.0.0-alpha.31/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="app.routes.js"></script>
<script src="homeCtrl.js"></script>
</head>
<body ng-controller="homeController">
this is the index.html page
<div ng-view> </div>
</body>
</html>
I have been going cross-eyed staring at this for a hour or more and can't see where the problem is.
Please check working demo: Plunker.
Modifications done:
Change angular version to 1.3.8
Add module dependency:
var MyApp = angular.module('testApp', ['app.routes']);
Remove homeController everywhere since it is not defined.
Conditions: AngularJS V1.0.3, Angular-UI-Router V0.2.10
What I want to implement is the index html page will dynamically forward to login html, then click login button, it will re-forward to home page.
Due to my reputation is not enough so I can not attach the images. Here I will attach my demo code.
3.1: index.html
<!-- StateProvider -->
<div ng-controller="demoController">
<button ng-click="goToHomePage()">Go To Home Page</button>
</div>
<!-- Load extra js -->
<script type="text/javascript" src="js/lib/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/lib/angular/angular.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-route.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-sanitize.js"></script>
<script type="text/javascript" src="js/lib/angular/angular-animate.js"></script>
<script type="text/javascript" src="js/lib/angular-ui/angular-ui-router.js"></script>
<script type="text/javascript" src="js/appDemo.js"></script>
<script type="text/javascript" src="js/service/DemoService.js"></script>
<script type="text/javascript" src="js/controller/DemoController.js"></script>
</body>
3.2: appDemo.js
var app = angular.module("demo", ['ui.router']);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
//$urlRouterProvider.otherwise("/landing/dashboard");
$urlRouterProvider.otherwise("/login");
//$urlRouterProvider.when('/landing/influencers', '/landing/influencers/dashboard/market-view');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'view/home.html',
controller: function(){
alert("123");
}
})
.state('login', {
url: '/login',
templateUrl: 'view/login.html'
});
}]);
app.run(['$state', function ($state) {
alert("running...");
/*$state.transitionTo('home');*/
$state.go('home');
}]);
3.3: DemoController.js
app.controller('demoController', function($scope, $state, demoService){
$scope.goToHomePage = function(){
alert('AAA');
$state.go("home");
}
});
When I click the 'Go To Home Page' button, nothing happened but prompted a message 'AAA' which setted in goToHomePage function.
Any idea how to forward to home page correctly?
Any suggestion should be highly appreciated.
You have too old version angularjs which is not compatible with angular-ui-roter.
Updating angular script version from 1.0.3 to 1.3.15 will solve you issue.