I was making a simple routing program but it is not working properly. Following is my code:
index.html
<div class="container">
Create Event
<div ng-view></div>
</div>
NewEvent.html
<div>
<h1>{{event.name}}</h1>
</div>
EditEventController.js
eventsApp.controller('EditEventController',
function EditEventController($scope){
$scope.event = {name: 'Ayushi'}
});
app.js
var eventsApp = angular.module('eventsApp', ['ngRoute', 'ngResource']);
eventsApp.config(function($routeProvider) {
$routeProvider.when('/newEvent', {
templateUrl: 'templates/NewEvent.html',
controller: 'EditEventController'
})
.otherwise({redirectTo : '/'});
});
Related
not sure what I have wrong here but the data doesn't display with this code and the only error I get is an XML Reading error XML in booksincategory.html , any ideas? Thanks
**booksincategory.html **
<div class="category col" ng-repeat="book in detail">
<h3 class="title">{{book.title}}</h3>
</div>
controller
app.controller('BookCategoryController', ['$scope', 'bookcategories', '$routeParams', function($scope, bookcategories, $routeParams) {
bookcategories.getAllBooks($scope.id).then(function(response) {
$scope.detail = response.data.books[$routeParams.categoryId];
});
}]);
service
app.service('bookcategories', ['$http', function($http) {
return {
getAllBooks: function(id) {
return $http.get('http://52.41.65.211:8028/api/v1/categories/'+ id + '/books.json')
}
}
}]);
app.js
var app = angular.module('ReaderApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/categories/:categoryId', {
controller: 'BookCategoryController',
templateUrl: 'views/booksincategory.html'
})
.otherwise({
redirectTo: '/books'
});
});
index.html
<div class="main">
<div class="container">
<div ng-view></div>
</div>
</div>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/BookCategoryController.js"></script>
<!-- Services -->
<script src="js/services/bookcategories.js"></script>
I'm pretty new to angular and i'm trying to make a simple application, that switches few views with ng-view and ng-route.
for some reason, every link that i click always routes me to the same controller (HomeController).
This is my config
(function(){
'use strict';
angular
.module('app',['ngRoute'])
.config(myConfig);
myConfig.$inject = ['$routeProvider'];
function myConfig($routeProvider){
//noinspection JSUnresolvedFunction
$routeProvider
.when('/',{
templateUrl : 'templates/home.html',
controller : 'HomeController',
controllerAs : 'vm'
})
.when('/shop', {
templateUrl : 'templates/shop.html',
controller : 'ShopController',
controllerAs : 'vm'
})
.when('/cart', {
templateUrl : 'templates/cart.html',
controller : 'CartController',
controllerAs : 'vm'
})
.otherwise({
redirectTo: '/'
});
}
})();
This is my HTML:
<body ng-app="app">
<div id="site-wrapper">
<nav>
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
</ul>
</nav>
<ng-view></ng-view>
</div>
<script src="js/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
<script src="js/index.js"></script>
<script src="controllers/CartController.js"></script>
<script src="controllers/HomeController.js"></script>
<script src="controllers/ShopController.js"></script>
</body>
And here are 2 controllers for example:
(function(){
'use strict';
angular
.module('app')
.controller('CartController', CartController);
CartController.$inject = ['$scope', '$log'];
function CartController($scope, $log){
var vm = this;
$log.info('Cart CTRL loaded');
}
})();
(function(){
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope', '$log'];
function HomeController($scope , $log){
var vm = this;
$log.info('Home CTRL loaded');
}
})();
Off of a quick view, it seems to me that you need to remove the '#' in the href urls. So doing this may work better for you.
<nav>
<ul>
<li class="button">Home</li>
<li class="button">Shop</li>
<li class="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i></li>
</ul>
</nav>
I would like to add link with controller to route but controller does not work.
I get this:
{{title}}
{{shortTitle}}
{{text}}
If I will put controller only to html also does not work
but when I added script to main controller in Default.html controller working correct
Where I made mistake?
#SSH this not work
$stateProvider
.state('home', {
url: '/',
template: '<div data-ng-include="'Scripts/js_angular_project/website/home/homePage.html'"></div>',
controller: 'homeCtrl'
})
homePage.html
<div>
<h2>{{title}}</h2>
<h3>{{shortTitle}}</h3>
<p>{{text}}</p>
</div>
<script>
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
</script>
#SSH this also does not work
$stateProvider
.state('home', {
url: '/',
templateURL: '/Scripts/js_angular_project/website/home/homePage.html',
controller: 'homeCtrl'
})
homePage.HTML - I remove ng-controller
<div>
<h2>{{title}}</h2>
<h3>{{shortTitle}}</h3>
<p>{{text}}</p>
</div>
<script>
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
</script>
#SSH this not work when I put my code
.html
var routerApp = angular.module('routerApp', ['ui.router']);
routerApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
controller:'homeCtrl'
})
.state('about', {
url: '/about',
template: '<div><h2>{{title}}</h2><h3>{{shortTitle}}</h3><p>{{text}}</p></div>',
controller:'aboutCtrl'
})
});
routerApp.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
routerApp.controller('aboutCtrl', function ($scope) {
$scope.title = "Volvo2";
$scope.shortTitle = "Volvo2";
$scope.text = "example2";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app="routerApp">
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
</div>
you should put controller name in router and also remove ng-controller = "homeCtrl" from template.
state('home' ,{
url : '/',
templateUrl:'/yourTempalteAddress',
controller:'homeCtrl'
})
and define your app in controller.
var app = angular.module("yourApp",[]);
app.controller('homeCtrl', function ($scope) {
$scope.title = "Volvo";
$scope.shortTitle = "Volvo";
$scope.text = "example";
});
I'm new to Angular and I'm trying to build a personal site using routes to change the views.
I've been able to get the nav to change class to active depending on what's clicked, but now the problem I'm having is that the main view doesn't load when the page loads (everything works on click though).
If anyone can help, I'd really appreciate it. If I've made any dumb errors, please let me know.
Also, I've got the view outside the controller div, should it be inside?
Thanks
HTML:
'use strict';
angular.module('myApp', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {templateUrl:'views/main.html', controller:'WidgetsController'})
.when('/about', {templateUrl:'views/about.html', controller:'WidgetsController'})
.otherwise({
redirectTo: '/'
});
});
myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
<body ng-app="myApp" class="ng-scope">
<div ng-controller="MyCtrl" class="ng-scope">
<ul class="nav nav-pills pull-right">
<li ng-class="{active:isActive('/main')}">Main</li>
<li ng-class="{active:isActive('/about')}">About</li>
</ul> </div> </div> </div>
<div ng-view=""></div>
Please see below working example
you've got twice definition for myApp make sure as well that you've all reference to all angular modules in your 'home page'
'use strict';
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl: 'views/main.html',
controller: 'WidgetsController'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'WidgetsController'
})
.otherwise({
redirectTo: '/main'
});
});
myApp.controller('WidgetsController', function($scope) {});
myApp.controller('MyCtrl', function($scope, $location) {
$scope.isActive = function(route) {
return route === $location.path();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.3/angular-route.min.js"></script>
<body ng-app="myApp" class="ng-scope">
<div ng-controller="MyCtrl" class="ng-scope">
<ul class="nav nav-pills pull-right">
<li ng-class="{active:isActive('/main')}">Main
</li>
<li ng-class="{active:isActive('/about')}">About
</li>
</ul>
</div>
<div ng-view=""></div>
<script type="text/ng-template" id="views/main.html">
<h1>Main View</h1>
</script>
<script type="text/ng-template" id="views/about.html">
<h1>About View</h1>
</script>
Hi What wrong am i doing. I am new to angular js and i am using ng-template for routing withing the views.
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationPro vider) {
$routeProvider.
when('/', {
templateUrl: 'add.html',
controller: 'myAppCtrl'
}).
when('/edit',{
templateUrl:'edit.html',
controller:'myAppCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}]);
}])
But its not working. Please help me .
below is my part of html
<body ng-controller="myAppCtrl">
<div ng-view>
<script type="text/ng-template" id="add.html">
<div>
<input type="text" ng-model="$storage.myname"/>
<input type="text" ng-model="$storage.myid"/>
<input type="number" ng-model="$storage.mynumber"/>
<button ng-click="submit();"> submit </button>
</div>
</script>
</div>
You are confusing a couple of things:
The controller that you defined in your body (ng-controller="my AppController") is also defined as controller for the route. I suspect you want one or the other but not both.
Your script tag containing the template is inside the div that it will replace (<div ng-view>). The ng-view div should be empty (<div ng-view></div>)and the template defined outside of it, possibly in the header.
I looked through your code, got solution for your routing here is working fiddle
Fiddle
Here is code
//html
<div ng-app="app">
<div ng-controller="MainCntl">
Choose:
add |
Edit |
<div ng-view></div>
<hr />
<pre>$location.path() = {{$location.path()}}</pre>
</div>
<script type="text/ng-template" id="add.html">
Add
</script>
<script type="text/ng-template" id="edit.html">
Edit
</script>
</div>
//app.js
var myApp = angular.module('app', [], function($routeProvider, $locationProvider) {
$routeProvider
.when('/add', {
templateUrl: 'add.html',
controller: MainCntl
})
.when('/edit', {
templateUrl: 'edit.html',
controller: MainCntl,
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
function MainCntl($scope, $route, $routeParams, $location) {
}