My dir's structure is like:
---/public
|
---index.html
---shop.html
|
---/js
|
---index.js
---index_controller.js
---/lib
---/css
---/plugins
|
---...
my index.html:
<!doctype html>
<html class="signin no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="description" content="Flat, Clean, Responsive, application admin template built with bootstrap 3">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<title>Index</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/themify-icons.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/skins/palette.css">
<link rel="stylesheet" href="css/fonts/font.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/lib/angular/angular.js"></script>
<script src="js/lib/angular/angular.min.js"></script>
<script src="js/lib/angular/angular-route.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/index_controller.js"></script>
<script src="js/index.js"></script>
<script src="plugins/modernizr.js"></script>
</head>
<body class="bg-primary" ng-app="myApp.index">
<div class="cover" style="background-image: url(img/cover3.jpg)"></div>
<div class="overlay bg-primary"></div>
<div class="center-wrapper">
<div class="center-content">
<div class="row">
<div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4">
<section class="panel bg-white no-b">
<ul class="switcher-dash-action">
<li class="active">Index</li>
</ul>
<div class="p15" ng-controller="IndexCtrl">
<form role="form" >
<div >
<button class="btn btn-primary btn-lg btn-block" ng-click='testRoute()'>
TestRoute
</button>
</div>
</form>
</div>
</section>
<p class="text-center">
Copyright ©
<span id="year" class="mr5"></span>
</p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var el = document.getElementById("year"),
year = (new Date().getFullYear());
el.innerHTML = year;
</script>
</body>
</html>
And shop.html renders the following: (only for test use):
SHOP
And index_controller.js is :
function IndexCtrl($scope, $http, $location, $route, $window) {
$scope.testRoute = function() {
console.log(">>>TestRoute>>>");
$location.url('/shop');
}
}
function ShopCtrl() {
console.log("ShopCtrl");
}
And index.js:
'use strict';
//Angular-js
var module = angular.module('myApp.index', ['ngRoute']);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
}]);
/*My Controllers*/
module.
controller('IndexCtrl', ['$scope', '$http', '$location', '$route', '$window', IndexCtrl]);
module.
run([
'$rootScope', '$location',
function($rootScope, $location) {
$rootScope.$on('$routeChangeStart', function(event, next, current) {
var nextTemplate = next.templateUrl;
var nextController = next.controller;
console.log("location.path:" + $location.path());
console.log('Template Starting to leave %s to go to %s\n', "", nextTemplate);
console.log('Controller Starting to leave %s to go to %s\n', "", nextController);
});
}
]);
And when I type "http://localhost:6001/index.html" in Chrome's address bar, it renders:
After clicking Test Route button, it changes to:
Only the url address changes, and it seems strange:
"http://localhost:6001/index.html#/shop"
Whereas I need
"http://localhost:6001/shop"
Chrome's console shows:
My problem is: how to render shop.html and how to navigate to /guoguo path properly, using code like:
$routeProvider.when('/shop', {templateUrl: 'shop.html', controller: ShopCtrl
});
I am pretty new to Angular. Maybe I am not thinking in the angularjs approach. Thanks for your points.
It is a mix of issues for your .html# being shown. Try this.
1: Add in the first line of head tags
<head><base href="/">
...
</head>`
2: Use this $locationProvider.html5Mode(true);
app.config(function($routeProvider,$locationProvider){
$routeProvider
.when('/',{
templateUrl: 'views/home.html',
controller:'homeCtrl'
})
.when('/about',{
templateUrl: 'views/about.html',
controller:'aboutCtrl'
})
.otherwise({
redirectTo: '/home'
});
$locationProvider.html5Mode(true);
});
This should remove the # from the page. But in your server make index.html as the default file serving for the path http://localhost:6001/ then it will load http://localhost:6001/index.html as http://localhost:6001/
I finaly get to know that AngularJS is a SPA(Single Page App) based framwork. If I simply jump to another html, the page will load another ng-app, which has no relation to origin app(the bootstrap has been restarted).
What solution I take is to use ng-view inside the index html. It allows to load different ng-view(which is in '<div></div>' from other html file), and config the routeProvider by declaring template url and controller.
I will paste the complete code later, thanks for you all !!!
Related
i'm having this online course on AngularJS, which provides the code in folders, according to the lesson. This one is about routing and single page applications; similar demos and structures work on plunker (like this one ) but not in my machine...I don't understand why, can someone help me out?
EDIT: actually, if I download this demo the thing wont work...
INDEX file:
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The Module file: APP.JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = 'Main';
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
Pages one and two (views):
<h1>This is Main.</h1>
<h3>Scope value: {{ name }}</h3>
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
The folder structure. The code is as suggested
Your references for angular and bootstrap are not correct
Angularjs
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
Bootstrap
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
You need to correct you urls like this
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = 'Main';
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Also you need to add a page for the view on the following path in project pages/main.html
You need to use your application throught the localhost like this:
Just mount your project on HTTP server.
$> sudo npm -g live-server
$> cd path/to/root/dir/project
$> live-server
EDIT: and eventually, include every time your scripts at bottom of body:
<body>
.....
.....
.....
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
I learn angularjs after a tutorial and I saw that you can remove # from the link. I did that but then my partials(from templateUrl) did't come in the page anymore.
Can someone please tell me where I'm wrong?
angular.module('myApp', ['ngRoute'])
.controller('mainController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}])
.controller('secondController', ['$scope', '$location', '$log', function($scope, $location, $log) {
$log.info($location.path());
}])
.config(function($routeProvider, $locationProvider) {
// $routeProvider lets us specify routes
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'pages/second.html',
controller: 'secondController'
});
$locationProvider.html5Mode(true);
});
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<base href="/">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="angularjs-learn-understand/ch05/app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
main.html:
<h1>This is Main.</h1>
second.html
<h1>This is second.</h1>
So in my browser I don't get main.html and second.html when I click on Home and Second. Why?
The UI Router github docs mentions:
When you have html5Mode enabled, the # character will no longer be used in your urls. The # symbol is useful because it requires no server side configuration. Without #, the url looks much nicer, but it also requires server side rewrites.
When you are trying to access your app in html5Mode (routes without any hash) then first of all you would need to remove the "#" from each one of your links (in this case the links are: Home, Second).
So...
"#" would just be "/"
"#/second" would be "/second"
After this, you would also need to enable server side URL Rewrites. Please checkout this link and configure your server as per the server that you are using.
Try to establish a .otherwise() at the end of $routerProvider that specifies a default route.
The templates main.html and second.html are defined correctly? The location is correct?
I have an Ionic app that has two views:
Home
Activity
The 'Home' view shows static info with a login screen that takes users to the 'Activity' page where they can see updated info from a $http request to my REST. I can make the call work on a single page, but I dont know where to put the controller when its being used on a view other than the main view and Im unsure how to handle the duplicate specification of the ng-app; its being called in both the 'home' view and the 'activity' view.
Here is my 'Home'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
and here is my 'Activity' view:
<ion-view title="Activity">
<ion-content overflow-scroll="true" padding="true" class="has-header">
<div ng-app="app" ng-controller="users">
<div style="width:100%; text-align:center;">
<table class="pure-table">
<thead>
<tr><td>Device ID</td><td>First Name</td><td>Last Name</td><td>Activity</td></tr>
</thead>
<tbody>
<tr ng-repeat="x in names">
<td>{{ x.Regid }}</td><td>{{ x.Fname }}</td><td>{{ x.Lname }}</td><td>{{ x.activity }}</td>
</tr>
<tbody>
</tbody></tbody></table></div>
<button class="button button-full button-light" id="refresh">
Refresh
</button>
</div>
<div class="bar bar-footer bar-stable">
<div class="title"></div>
</div>
<script>
var app = angular.module('app', []);
app.controller('users', function($scope, $http, $interval) {
$http.get("call to REST.php")
.then(function (response) {$scope.names = response.data.records;});
$interval(MyCtrl, 3000);
});
function callAtInterval(){
//console.log("Interval Occured");
//window.location.reload();
//$state.reload();
}
function MyCtrl($scope )
{
$scope.updateFromModel = 'Initial Value';
setTimeout( function()
{
console.log( 'automatically update view?' );
$scope.updateFromModel = "It's been updated";
$scope.$apply();
}, 1000 );
}
$('#refresh').click(function() {
location.reload();
});
</script>
</ion-content>
</ion-view>
and here are my routes:
angular.module('app.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
.state('login', {
url: '/home',
templateUrl: 'templates/login.html',
controller: 'loginCtrl'
})
.state('activity', {
url: '/activity',
templateUrl: 'templates/activity.html',
controller: 'activityCtrl'
})
$urlRouterProvider.otherwise('/home')
});
You can add controllers in controller.js file same like following code:
app.controller('MyController1', function($scope) {
//write controller specific code here...
});
app.controller('MyController2', function($scope) {
//write controller specific code here...
});
... so on
Or you can define in <script> tag too right after define your app module:
var app = angular.module('app', []);
app.controller('MyController1', function($scope) {
//write controller specific code here...
});
app.controller('MyController2', function($scope) {
//write controller specific code here...
});
... so on
I just figured it out. The controller goes in the controller.js under the controller thats already been established for the activity route.
You have to create a controller for each view/session in a isolated js file (controllers.js) and then declare as a angular module of your app.
Check out the official Ionic Framework Tutorial recommendations
https://ccoenraets.github.io/ionic-tutorial/create-angular-controller.html
angular.module('starter.controllers', [])
.controller('loginCtrl', function ($scope) {
$scope.LoginForm = {};
$scope.Login = function() {
alert($scope.LoginForm.User);
alert($scope.LoginForm.Password);
location.href = "#tab/qr-reader";
};
})
more controllers
...
I am trying to creae an application in angular using ng-route but i cannot get it to work.
I did search the issue and tried suggestions like to move my ng-app to but nothing seems to work.
I have added a plunker link below
http://plnkr.co/edit/a8VIRzloIMqANK4f8YXb?p=preview
Can someone help
adding the code here too
index html
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script type="text/javascript" src="dist/ng-table.min.js"></script>
<link rel="stylesheet" href="dist/ng-table.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="DemoCtrl.js"></script>
</head>
<body ng-controller="DemoCtrl" ng-app="stockApp">
<header>
<div class="blog-masthead">
<div class="container">
<nav class="blog-nav">
<h1 class="stockHeader">Stock App</h1>
<a class="blog-nav-item pull-right" href="#/">Login</a>
<a class="blog-nav-item pull-right" href="#/stock">Stock</a>
<a class="blog-nav-item active pull-right" href="#/addTools">Add Tools</a>
</nav>
</div>
</div>
</header>
<div ng-view></div>
</body>
</html>
app.js
var sampleApp = angular.module('stockApp', ['ngRoute']);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'login.html',
controller: 'DemoCtrl'
}).
when('/stock', {
templateUrl: 'stockStatus.html',
controller: 'DemoCtrl'
}).
when('/addTools', {
templateUrl: 'addTools.html',
controller: 'DemoCtrl'
}).
otherwise({
redirectTo: '/'
});
}]);
DemoCtrl.js
var app = angular.module('stockApp', ['ngTable']).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
other than these have 3 partials.
See this fork of your original plunker where the code segments below have been updated: http://plnkr.co/edit/91XYMEC85Shgu6kQSrty?p=preview
// DemoCtrl.js
var app = angular.module('controllers', []).
controller('DemoCtrl', function($scope) {
$scope.stock="In Stock!"
})
// app.js
var sampleApp = angular.module('stockApp', ['ngRoute', 'controllers']);
First, your controller code was re-initializing the stockApp module by passing in dependencies. If you need separate depedencies for your controllers, create them as a separate module and make your app dependent on that module.
Second, I updated the versions of angular and angular JS. Conflicting versions can cause issues as per this prior answer: Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
One additional thing to check on... make sure you're loading your angular js files (controllers, services, factories, etc) in the correct order. For example, if a controller uses a service, the service needs to be loaded into the DOM before the controller.
Additionally, make sure that none of your services or factories are re-initializing the app. Your code should NOT look like this:
angular.module('app', [])
.service('TrxnService', function () {
//code here
})
But instead, it should look like this (without the brackets)...
angular.module('app')
.service('TrxnService', function () {
//code here
})
NOTE FOR NEWBIES: replace 'app' with whatever you named your app in your top level module declaration.
I have a very simple Angular application that works as expected in Firefox and Chrome, but does not work in IE.
index.html is like this:
<!DOCTYPE html>
<html ng-app="angularFormsApp">
<head>
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="app/AngularFormsApp.js"></script>
<script src="app/EmployeeForm/efController.js"></script>
<script src="app/EmployeeForm/efDirective.js"></script>
<script src="app/EmployeeForm/efService.js"></script>
</head>
<body ng-controller="efController" class="container">
<h1>Start Page</h1>
<div ng-view>
</div>
</body>
</html>
my AngularFormsApp.js is defined like this:
var angularFormsApp = angular.module('angularFormsApp', ["ngRoute"]);
angularFormsApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "app/Home.html",
controller: "HomeController"
})
.when("/newEmployeeForm", {
templateUrl: "app/EmployeeForm/efTemplate.html",
controller: "efController"
})
.otherwise({
redirectTo: "/home"
});
});
angularFormsApp.controller("HomeController",
function ($scope, $location) {
$scope.addNewEmployee = function () {
$location.path('/newEmployeeForm');
};
});
my Home.html only contains a button:
<input type="button" class="btn btn-primary" value="Add New Employee" ng-click="addNewEmployee()" />
Upon starting the application up, index.html should redirect to
http://localhost:65294/index.html#/home
and I should see the "Add New Employee" button which I see in Chrome and Firefox, but not in IE. When I start the application in IE, the URL displayed is
http://localhost:65294/index.html
and I do not see the button. So it seams as though the redirect does not work, but only in IE. Even if I type the correct URL in the browser's address bar, I still don't see the button.
So what's different for IE?