There is the following index.slim:
doctype html
html ng-app="app"
head lang="en"
title First phonegap application
link href="bower_components/ionic/release/css/ionic.min.css" rel="stylesheet"
body
ion-header-bar
h1.title
| Header
ion-content
ion-nav-view
ion-footer-bar
h1.title
| Footer
script id="home.html" type="text/ng-template"
| 12345
script src="bower_components/ionic/release/js/ionic.bundle.min.js"
script src="js/main.js"
script src="cordova.js"
And the following main.js:
angular.module("app", ["ionic"]).config([
"$stateProvider", function($stateProvider) {
return $stateProvider.state("home", {
url: "/",
templateUrl: "home.html",
controller: "HomeController"
});
}
]).controller("HomeController", [
"$scope", "$state", function($scope, $state) {
return console.log(111);
}
]);
When I execute localhost:8888 (I use gulp server) I can see header/footer, but I don't see my home template and console output from controller. How can I fix it? Thanks in advance!
Related
my main directory folder name is angularjs and there have many files, file lists are given billow.
1.index.html
2.main.html
3.blue.html
4.red.html
5.green.html
i want to create routing using AngularJs, i have do that but facing error what i have wrong.
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "index.html"
})
.when("/red", {
templateUrl: "red.html"
})
.when("/green", {
templateUrl: "green.html"
})
.when("/blue", {
templateUrl: "blue.html"
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-route.min.js"></script>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
</body>
and i want to remove # simble from routing path
Try replacing your code with below.
<p>Main</p>
Red
Green
Blue
<div ng-view></div>
If you want to remove the exclamation mark, you should add a config to the $locationProvider as below.
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
Refer,
Exclamation mark after hash (#!) in angularjs app
I'm very new to Angular.js.
I've taken the necessary elements from this tutorial on modal windows within Angular.js: http://jasonwatmore.com/post/2016/07/13/angularjs-custom-modal-example-tutorial
Isolated, I can get this code to work, but after porting it to my website, I just can't get it to work.
In Jason's code, he has a file called index.controller.js, and although I've ported this file to my own page, I don't believe it's firing. Here's index.controller.js:
(function () {
angular
.module('app')
.controller('Home.IndexController', Controller);
function Controller(ModalService) {
var vm = this;
vm.openModal = openModal;
vm.closeModal = closeModal;
function openModal(id){
ModalService.Open(id);
}
function closeModal(id){
ModalService.Close(id);
}
}
})();
On my own page, I have all the controllers contained within app.js. Here's how it's laid out:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
})
...
});
You can see that, in the second .state, I'm attempting to call on the index.controller.js file for this particular partial. For some reason, though, the code under screeningsController (down below) is the code that's firing.
Further down in the same app.js file, I have my controllers:
...
app.controller('screeningsController', ['$scope', '$log', function($scope, $log){
$scope.popup = function() {
// assign a message to the $scope
$scope.message = 'Hello World!';
// use the $log service to output the message in a console
$log.log($scope.message);
};
}]);
...
Is there any way I can somehow integrate what's in the index.controller.js file into my screeningsController in the app.js? I've been trying to get a modal window working on my site for about a week now. Any help is much appreciated.
Start by creating a controller with identifier Home.IndexController. Based on the route configuration this will instantiate when you navigate to "/screenings". Call the popup() function attached to $scope of Home.IndexController via a directive us ng-click for testing. As you have specified controllerAs make sure to reference controller properties and methods prefixed with vm..
You do not need both index.controller.js and app.js both loaded. It looks everything you'd need is defined in app.js, so just make sure that is being loaded in your application. Eventually you'd want to separate these into different files and/or modules as necessary.
Try the following:
Configuration:
var app = angular.module('app', ['ngRoute', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: '/',
templateUrl: 'pages/main.html',
controller: 'mainController',
controllerAs: 'vm'
})
.state('screenings', {
url: '/screenings',
templateUrl: 'pages/screenings.php',
controller: 'Home.IndexController',
controllerAs: 'vm'
});
...
});
Home.IndexController:
app.controller('Home.IndexController', ['$log', function($log){
var vm = this;
vm.message = '';
vm.popup = function() {
vm.message = 'foobar';
$log.log(vm.message);
}
}]);
Screenings Template:
<!-- Home.IndexController /screenings template -->
<div>
<button type="button" ng-click="vm.popup()"></button>
</div>
This also assumes you have ui-view specified somewhere in your main template like index.html or equivalent:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body ng-app="app">
<div ui-view></div>
<!-- Vendor and Custom scripts added here -->
</body>
</html>
I am trying to build a basic SPA using angularJS, the problem is I am not able to load the template using angularJS, the following is my code
customAngular.js
var app = angular.module("appModule", ["ngRoute"]);
app.config([function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
HTML PAGE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="~/angularJS/angular.min.js"></script>
<script src="~/angularJS/customAngular.js"></script>
</head>
<body ng-app="appModule">
main
Green
red
<div ng-view></div>
</body>
</html>
Can anyone help me to understand the error
UPDATE 1
has bneen modified
UPDATE 2
i have updated the page as per the request, i have changed the angular in to unminified version 1.6
<script src="~/angularJS/angular.v1.6.1.js"></script>
<script src="~/angularJS/angular-route.js"></script>
<script src="~/angularJS/customAngular.js"></script>
and changed my customAngular.js file like this
var app = angular.module("appModule", ["ngRoute"]);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "pages/main.html"
})
.when("/red", {
templateUrl: "pages/about.html"
})
.when("/green", {
templateUrl: "pages/blog.html"
}).otherwise({ redirectTo: '/' })
}]);
now i am able to see the index page like this
index page
but when i move my page to /red, i get an error like this
error page on redirection
You have injected your $routeProvider the wrong way:
app.config([function ($routeProvider) {
/* $routeProvider will be undefined */
...
}]);
Thing is, you mixed two ways of Angular injection:
app.config(function ($routeProvider) {
...
});
And
app.config(['$routeProvider', function ($routeProvider) {
...
}]);
You put [] around your function, so Angular expected to see some component identifiers as strings in the head of the array. So, simply remove the square brackets or add the component identifier, as shown in the two examples above.
Update
You still see an error because, as #Gayathri pointed out in the comments, you are trying to access the URI /red on your server... which doesn't exist. You links should be like:
main
Green
red
See this codepen.
You are missing <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
I'm a beginner to AngularJS and have the following question. I'm playing with ngRoute module and this is my code so far:
html:
<nav ng-controller="navController as nav">
<ul>
<li ng-repeat="item in navItems">
{{ item.name }}
</li>
</ul>
</nav>
<div id="main">
<div ng-view></div>
</div>
app.js
(function(window) {
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
if (window.history && window.history.pushState) {
$locationProvider.html5Mode(true);
}
}]);
app.controller('mainController', ['$scope', function($scope) {
$scope.message = 'Hello from home page';
}]);
app.controller('contactController', ['$scope', function($scope) {
$scope.message = 'Hello from contact page';
}]);
app.controller('navController', ['$scope', function($scope) {
$scope.navItems = [
{ name: 'Home', url: '/' },
{ name: 'Contact', url: '/contact' }
];
}]);
})(window);
And it works fine. Angular renders menu, and when I click on the link it shows me desired page. But except in the following case. When it displays the homepage (url: http://localhost:3000) and i manually add to the url address "/contact" then I'm getting blank page with error "Cannot GET /contact". Could someone explain me why this is happening and how can I fix it? I would appreciate any help. Thanks.
In fact you need the # (hashtag) for non HTML5 browsers.
Otherwise they will just do an HTTP call to the server at the mentioned href. The # is an old browser shortcircuit which doesn't fire the request, which allows many js frameworks to build their own clientside rerouting on top of that.
You can use $locationProvider.html5Mode(true) to tell angular to use HTML5 strategy if available.
Here the list of browser that support HTML5 strategy: http://caniuse.com/#feat=history
Source: AngularJS routing without the hash '#'
I have a really weird bug, I have set my routes and my controllers. Now I have just a blank page with no errors?
index.html;
<!DOCTYPE html>
<html ng-app="RekenTalent" lang="nl">
<head>
<title>Rekentalent.nl: Ben jij een talent in Rekenen?</title>
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="/app/front/assets/stylesheets/style.css">
<!-- AngularJS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
<!-- Controllers -->
<script src="/app/front/controllers/controller.js"></script>
<!-- Router -->
<script src="/app/front/router.js"></script>
</head>
<body ng-view></body>
</html
>
Controller.js:
/**
* RekenTalent
*
* Copyright 2014 - Rekentalent.nl
*/
var RekenTalent = angular.module('RekenTalentControllers', []);
RekenTalent.controller('rekenCtrl', ['$scope', function($scope){
}]);
Router.js:
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirect: '/index'
});
}]);
And /templates/index.html says just 'hi'. Does anyone know why I get a blank page? It should redirect me to /index.html and /index.html should use /templates/index.html as the template. Whats the problem and the fix?
UPDATE:
when I go to /index it works, so the otherwise param doesn`t work, why not?
change redirect to redirectTo
And it's better to use home.template to avoid all this kind of problems, I mean consider:
You have an index.html that contains your whole included scripts, like angular, jquery , ..., and in the body tag there is ng-view, ok?
Now, if you have any templates such as welcome or whatever for index, write that template in a home.html, OK? Like this:
index.html :
<body ng-app="yourapp">
<div ng-view>
</div>
</body>
Home.html
<div>
Welcome, user. This is index.
</div>
Your app configuration:
yourapp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/home.html',
controller: 'homeCtrl'
})
.otherwise({redirectTo:'/'});
}
And it is a good practice to put all of your templates inside a partials folder, where the father folder contains index.html like this
root
yourAppFolder
1-Assets
Css
Js
2-Partials
home.html
login.html
3-index.html
Found it; redirect should be redirectTo;
var RekenTalent = angular.module('RekenTalent', [
'ngRoute', 'RekenTalentControllers'
]);
RekenTalent.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: '/app/front/templates/index.html',
controller: 'rekenCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
I have this sample of code for example:
.config(['$routeProvider',
function($routeProvider) {
console.log('routeando');
//alert('otherwise' + $routeProvider.route);
$routeProvider.
when('/', { templateUrl: 'home'}).
when('/route1', { templateUrl: 'route1'}).
/*Without the next line, redirectTo doesnt work*/
when('/error', { templateUrl: 'error'}).
otherwise({ redirectTo: '/error'});
}]);
Otherwise is only going to work if you have already a "when" parameter for that route.
Excuse me for my english and have a nice day.