I am trying to use the angular-seed project (https://github.com/angular/angular-seed) to start a new project. I am trying to add in a new directive.
Created testDirective.js file :
'use strict';
angular.module("myApp.testDirective", [])
.directive("testDirective",
function() {
return {
template : "<h1>Made by a directive!</h1>"
};
});
Included the file in index.html, added "myApp.testDirective" into app.js, in view1.js I added :
'use strict';
angular.module('myApp.view1', ['ngRoute','myApp.testDirective'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
and view1.html looks like :
<p>This is the partial for view 1.</p>
<div testDirective></div>
However, when I run the app, nothing shows up where testDirective is. Not sure where I've gone wrong.
Whenever you wanted to use directive on the html, you should just replace capital letter to small case prefix - with it. Directive normalization process convert that test-directive to testDirective while compiling directive.
<div test-directive></div>
When including attribute directives inside the opening tag of an HTML element, they must be converted to dashes.
<div test-directive>
Related
Does Angularjs provide any method that can traverse the DOM for text after a new view is returned? The filter seems to almost accomplish this but I'm not looking to return a new array of elements. For example;
html
<div ng-view="">
<ul>
<li>Milk</li>
<li>Eggs</li>
<li>Cheese</li>
</ul>
</div>
js
$(document).ready(function() {
var app = angular.module('app', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/', { templateUrl: 'example.html' })
}]);
app.controller('rttController', function($scope, $location) {
$scope.$on('$locationChangeSuccess', function(event) {
// Search through the DOM for text returned in this view
});
});
My end goal is to have an array of predefined keywords that I'd be searching for in the DOM:
var foods[] = {"yogurt", "butter", "margarine"} .
Any ideas?
No it doesn't provide this functionality. Is it not possible to load the variables into an array and loop through that. The using ng-repeat you can display them on the page in your list.
Are you limited to having these items in HTML or would you be able to load them into an array and display them?
Maybe you could look into child scopes and having a controller within the HTML file you are including to manage the list?
I have the following directive in a typescript file:
ProjectDirectivs.ts
/// <reference path="../module.ts"/>
module BalancingApp.App.Directives {
angular.module('balancingApp')
.directive('wbProject', function() {
return {
template: "<p>Projectdetails</p>"
};
})
;
}
When I call it inside of a template for a project detail page
ProjectDetailPage.html
<ion-view view-title="Projekt Details">
<ion-content class="padding">
<h1>Projekt Details</h1>
<div wbProject>
</div>
</ion-content>
</ion-view>
it has no effects, there seems just to be empty space below the heading.
Do I do something wrong? How can I test if the wbProject directive actually is used?
If I edit the typescript file and insert errors, the whole page keeps in loading stage, so it seems that the file gets actually used and is not ignored.
Angular converts the directive name into camel-case in template, so you should use wb-project instead of wbProject in template
Try this
angular.module('balancingApp')
.directive('wbProject', function() {
return {
restrict: 'AE',
template: "<p>Projectdetails</p>"
};
});
I want to use Angular-route to change the controller used in a page
This is some part of my angular code
var cat_list = angular.module('getCat', ['ngRoute']);
cat_list.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('category/upcoming', {
controller: 'getUpcoming'
})
.when('category/popular', {
controller: 'getPopular'
});
$locationProvider.html5Mode(true);
});
cat_list.controller('getUpcoming', ['$scope', function($scope, $routeParams) {
//controller code goes here
});
cat_list.controller('getPopular', ['$scope', function($scope, $routeParams) {
//controller code goes here
});
and this is some part of my html
<div class="row" ng-app="getCat">
<div class="col-md-12">
<!-- something happen in here -->
</div>
</div>
but when I tried to visit http://localhost/project/category/upcoming or http://localhost/project/category/popularthe route is not working (no controller picked or selected)
did I miss something?
Try this
var cat_list = angular.module('getCat', ['ngRoute']);
cat_list.config(['$routeProvider', '$locationProvider',
etc etc.
Could you also please explain why you want to use different controllers on the same page? Why dont you use two different partials to create two seperate pages for upcoming and popular?
Or, a different approach would be to just use the same controller, and filter your results using the appropriate directive, without changing the stuff that you load each time.
Have to mention ng-view, so that this directive is the placeholder to replace your view partials on url changes.
<div class="row" ng-app="getCat">
<div class="col-md-12">
<div ng-view></div> // ---- This is the thing you missed
</div>
</div>
I worked through the tutorial on the AngularJS website and I noticed that in at step 7, they change how a controller is introduced into the application. Initially, they use a directive:
<body ng-controller="PhoneListCtrl">
...
</body>
However, it later gets changed to use a controller attribute as part of an ng-route.
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
/* rest of routes here */
Here's the git diff where the change is made. Is there a difference between these two techniques?
Controller using a ng-controller directive:
A new $scope is created on ng-controller element.
Explicit view-to-controller connection
Visible with inspect element, etc
Controller in a route:
A new $scope is created per route on the ng-view element.
The controller can request dependencies defined in the route resolve.
Optional view-to-controller connection. Recommended to have a naming convention that maps routes to controllers to views.
One of well-known feature of Angularjs is Single-Page Applications.
If you assign ng-controller attribute directly on the page：
<body ng-controller="PhoneListCtrl">
...
</body>
you can't switch controllers easily for other tasks.
So, use route to switch controllers is one of important step in learning Angular Single-Page feature.
You can have same layout and one different element by using route and ng-view directive.
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/tablets', {
templateUrl: 'partials/tablet-list.html',
controller: 'TabletListCtrl'
}).
If '/phones'
<div ng-view></div>
will include your 'partials/phone-list.html' template
and set 'PhoneListCtrl' as div controller
The same：
If '/tablets'
<div ng-view></div>
will include your 'partials/tablet-list.html' template
and set 'TabletListCtrl' as div controller
This is the difference between two.
ng-view is the cause of the difference. You can't really do this
<div ng-view ng-controller="PhoneListCtrl">
As you'd need to change that controller as the route changed. So basically the router does that for you, and uses the controller you specified when you defined your routes.
You probably can do this:
<div ng-view>
and then in your template:
<div ng-controller="PhoneListCtrl">
and leave out the controller declaration in your routes. Which I suspect would have essentially the same effect, although I've never tried that. Probably better to go with convention here though.
In the 1st case the controller is directly on the page.
Once they change it, that controller is only on the page if the route is /phones otherwise it is some other controller based on some other route.
Yes - the change is this:
if you want to display a specific controller on the page, you can use
<body ng-controller>
BUT
if you want to do routing (application with more than one controller) - you will need to use routing + change the body to:
<body ng-view></body>
I am new to angularjs, was just trying to build a CRUD app with it.
My code is like this http://jsfiddle.net/fpnna/1/
And I am using apache as webserver, when turing on the
$locationProvider.html5mode(true);
then getting
uncaught TypeError: Object #<Ic> has no method 'html5mode' from testApp
When I am clicking to "Add new" the path changing to "/new" but getting error
404 The requested URL /new was not found on this server.
Any idea where I am doing wrong.
I went through the official manual, couldn't figure it out.
Thanks in advance.
You have a couple issues, first in jsfiddle you don't need the body tags plus you have multiple body tags. Also your fiddle has two ng-apps, the routes are defined incorrectly (should be /new for instance), invalid ng-view closing tag, there should only be one. You should include the javascript with No wrap in head and lastly it is html5Mode with a capital M on the mode and none of your partials exist at their urls nor are they defined as local scripts.
I would suggest you use plunkr as it allows you to add other local files, ie your partials which don't exist in the fiddle.
I've cleaned up all of the issues on this plunkr: http://plnkr.co/edit/A23Fxn9Ji02TGZ0jouZR?p=preview
angular.module('testApp', []).
config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true); // case is important
$routeProvider.
when("/", {
templateUrl: "list.html"
}).
when("/new", { // make sure and use absolute link to route
templateUrl: "edit.html"
})
})
function testCtrl($scope) {
$scope.persons = [{
name: "X"
}, {
name: "Y"
}, {
name: "Z"
}]
}
and the html:
<body ng-controller="testCtrl" >
<div class="main-nav"> Add Me
</div>INDEX
<div >
<div ng-view>
</div>
</div>
</body>
Please review the documentation and tutorials to learn the basics on setting up a project. http://docs.angularjs.org/guide/bootstrap