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.
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!
Can you help me the problem about Angular Material error show.
I import the js file is success,but I don't know what happen about it.
https://i.stack.imgur.com/BnDoD.png
when i click button quickly,It will be bigger.
model.js
angular.module ('model', ['ui.router','ngMaterial'])
.config (['$mdThemingProvider','$urlRouterProvider', '$stateProvider',function ($mdThemingProvider,$urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise ('/login');
$stateProvider.state ('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'loginCtrl'
});
}]);
index.html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
You are missing the reference for the css of angular material
<link rel="stylesheet" href="//rawgit.com/angular/bower-material/master/angular-material.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//rawgit.com/angular/bower-material/master/angular-material.js"></script>
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
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
Ok this is my first attempt at this. Trying to get my page to load. my App.js file has all the nessities I hope. here are my files below:
Index.html:
<!DOCTYPE html>
<html ng-app="TodoApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.9.0.js"></script>
<script src="https://code.angularjs.org/1.3.5/angular-route.js"></script>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-resource.js"></script>
<script src="Scripts/app.js"></script>
<link rel="stylesheet" type="text/css" href="Content/bootstrap.css" />
<title>Amazing Todo List</title>
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
App.js:
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(function ($routeProvider) {
$routeProvider.
when('/', { controller: ListCtrl, templateUrl: 'list.html' }).
otherwise({ redirectTo: '/' });
});
var ListCtrl = function ($scope, $location) {
$scope.test = "testing";
};
List.html:
<h1>Hello: {{test}}</h1>
I am currently running the Localhost server via Visual Studio 2013. Please Help, Thanks!
You would need to include ngRoute inorder to use angular routing. So include ngRoute in your module as a dependency.
var TodoApp = angular.module("TodoApp", ["ngResource", "ngRoute"]).
config(.....
Also remember to include angular-route.js unless you are using very old version of angular that comes with routing as well. You can refer to the cdn http://code.angularjs.org/x.y.z/angular-route.js or download the file.
Plnkr