This is my Index page
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Content/efDirective.js"></script>
<script src="~/Content/EmployeeForms.js"></script>
<html ng-app="AngularModule">
<body>
<div employee-form></div>
</body>
</html>
This is DirectiveJs
var app = angular.module("AngularModule", []);
app.directive("employeeForm", function () {
debugger;
return {
restrict: 'EA',
//template: 'helloworld',
templateUrl: 'Content/efTemplate.html'
}
});
Content in efTemplate.html is not displaying on index.cshtml page.
Check the message in browser console, probably there will be some error message. Maybe the url to template is not correctly resolved?
Did you specify the base url for angular?
The other option is to pre-render the template directly in your html index file. That has the benefit of saving the extra http request.
Like this:
<script type="text/ng-template" id="templateUrl">
<h1>your template </h1>
</script>
Example here https://docs.angularjs.org/api/ng/directive/script
Related
I have just started working with AngularJs and i am stuck at this place:
i have index.html and inside that am including script tags like angular oclazyload and my application.js file
<html ng-app="mymodule">
<head>
<script src="angular.min.js"></script>
<script src="ocLazyLoad.min.js"></script>
<script src="angular-css-injector.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.min.js"></script>
<script src="application.js"></script>
</head>
<body>
<div ng-controller="mycontroller">
<h1>Sample Page</h1>
<div ng-include="login"></div>
</div>
</body>
inside my application.js i am using oclazyload cssInjector and nginclude to load another js,css and html file(login.js,style.css and login.html).
My application.js file
var mymodule=angular.module("mymodule",["oc.lazyLoad","angular.css.injector"]);
mymodule.controller("mycontroller",function($scope,$ocLazyLoad,cssInjector){
$ocLazyLoad.load("/task1/login.js");
cssInjector.add("style.css");
$scope.login="login.html";
});
In my login.js file i am defining one controller as logincontroller
login.js file:
var mymodule=angular.module("mymodule",[]);
mymodule.controller("logincontroller",function($scope)
{
$scope.title="hello World!!!";
})
and in my login.html i am calling that controller i.e(logincontroller)
<div ng-controller="logincontroller">
{{title}}
</div>
all the files are loading but i am getting error that controller with this name is not registered.
You could have timing problem. Can be login.html loading before login.js ? Try to change $scope.login in $ocLazyLoad.load("/task1/login.js")promises. Like
$ocLazyLoad.load("/task1/login.js").then(function(){ $scope.login = 'login.html '});
And you must change this
var mymodule=angular.module("mymodule",[]);
mymodule.controller("logincontroller",function($scope)
{
$scope.title="hello World!!!";
})
to this
var mymodule=angular.module("mymodule");
mymodule.controller("logincontroller",function($scope)
{
$scope.title="hello World!!!";
})
I'm just playing with angular directives, but somehow the comment way to add directives is not showing up. Here is the markup.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="angular.js"></script>
</head>
<body ng-app="directive-app">
<first-directive></first-directive>
<div first-directive></div>
<div class=first-directive></div>
<!-- directive: first-directive -->
<script src="main.js"></script>
</body>
</html>
Directive definition
var app=angular.module('directive-app',[]);
app.directive("firstDirective", function() {
return {
restrict : "EACM",
templateUrl : 'template.html'
};
});
In template.html there is one h1 element. But comment way to add directives is not showing up in UI and in which case comment approach is even required.
Set replace option to true as follows
app.directive("firstDirective", function() {
return {
restrict: "EACM",
replace: true,
templateUrl: 'template.html'
};
});
Here's demo.
I'm trying to use the ngRoute in my angularJS page, but I'm not able to load my content within ng-view.
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="CSS/index.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="Scripts/app/index.js"></script>
</head>
<body ng-app="app">
<header>
<a ng-href="#/add-new">Add new</a>
</header>
<div ng-view></div>
<footer>
#Copyright 2017
</footer>
</body>
</html>
index.js:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/add-new', {
template: 'Some content'
})
}]);
Not sure what I'm missing here.
If I add otherwise condition on $routeProvider, it gets loaded. Please let me know what am I missing here so that the content within my $routeProvider.when gets loaded in my ng-view on markup. Thanks
Also not getting any console errors.
try this
JS:
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "index.htm"
})
.when("/add-new", {
templateUrl : "add.htm"
})
});
HTML:
Red
Add this below line in your HTML page
<base href="/">
and change ng-href to href
EDIT :
$location in HTML5 mode requires a <base> tag to be present!
If you using ng-href, the you should pass $scope object
You don't have entry point for the app, so if you load your app and you are not going to specific url you will not see any results.
You can add otherwise({redirectTo:'/add-new'}) or go to #/add-new to see your page
I am building an application where my DOM is add dynamically outside of angular world ie. jQuery and also the javascript for that is loaded dynamically. I get $compile from angular.injector method and also the scope and then did used the $compile service. But with all this my directives and controller don't run. I see them added to my app but still controller won't initiated.
index.html is
<html>
<head>
<script data-require="jquery#2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-app="test">
<div id="main">
</div>
</div>
<!--<script src="https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js"></script>-->
</body>
</html>
script.js
//Create angular module
angular.module("test",[]);
$(document).ready(function(){
//Load dynamically the JS
$.getScript('https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js', function(){
angular.element($("#main")[0]).scope().$root.$apply();
});
var scrip = "<script src=\"https://googledrive.com/host/0ByYZbKdhSDoSeFNQVGdEd2k3amM/direc.js\"></script>"
var htmlStr = "<span test-drective=\"test-drective\">Test</span>";
$("#main").append(angular.element('*[ng-app]').injector().get("$compile")(htmlStr)(angular.element($("#main")[0]).scope().$new(true)));
})
and direc.js is
angular.module("test")
.directive("testDrective", function(){
return {
restrict: 'A',
controller: function($scope) {
console.log("Controller")
},
link: function(scope, elem, attrs) {
console.log("link")
}
};
})
If I add the direc.js in index.html, all works fine but not with the dynamic load of script using jquery or added as part of dom.
Sample app:
https://plnkr.co/edit/gekifqGzJDAsWs5OF4ro
Try to bootstrap your angular app in code after you loading is completed and your DOM is ready angular.bootstrap(document, ['myApp']);
See bootstraping angular section "Manual Initialization"
In general all your javascript code of your angular app must be present at the client. And you should not manipulate the DOM outside directives. Perhaps this ng-bind-html-compile directive helps you to solve your problem in a more angular way
I am trying to use this plugin http://prrashi.github.io/rateYo/ and for some reason when my artistpage.html page is served up the stars aren't appearing. I know the page is being served up because all other elements in the view appear. Something else that is strange is that when I put <div id="rateYo"></div> in the index.html the plugin works. So I am not really sure why its not working when the view is injected into <div ng-view></div>. Assuming my paths are correct, what could be the problem?
index.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
</script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="./lib/jquery.rateyo.css"/>
</head>
<body ng-app='LiveAPP'>
<div ng-view></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="./lib/jquery.rateyo.js"></script>
<script src="/controllers/mainCtrl.js"></script>
<script src="/controllers/signUpCtrl.js"></script>
<script src="/controllers/artistCtrl.js"></script>
<script src="/routes.js"></script>
<script src="./js/stars.js"></script>
</body>
</html>
artistpage.html
<h1>This is a title</h1>
<div id="rateYo"></div>
routes.js
angular.module('LiveAPP', ['ngRoute',
'LiveAPP.main',
'LiveAPP.signUp',
'LiveAPP.artist'])
.config(function($routeProvider, $httpProvider) {
$routeProvider
.when('/', {
templateUrl : '/home.html',
controller : 'mainCtrl'
})
.when('/signup',{
templateUrl : '/signup.html',
controller : 'signUpCtrl'
})
.when('/artist',{
templateUrl : '/artistpage.html',
controller : 'signUpCtrl'
})
});
stars.js
$(function () {
$("#rateYo").rateYo({
rating: 3.6
});
});
The code in stars.js is evaluated when the document is ready, but jQuery has no knowledge of Angular replacing the view content in ng-view, so it won't attach the rating plugin to any newly added elements. Generally, you want to wrap jQuery plugins in Angular directives so that you can use them the "Angular way." For example:
app.directive("rateYo", function() {
return {
restrict: "A",
scope: {
rating: "="
},
template: "<div id='rateYo'></div>",
link: function( scope, ele, attrs ) {
$(ele).rateYo({
rating: scope.rating
});
}
};
});
Which would be used like this in your view:
<!-- assuming $scope.myRating equals the rating you want to display -->
<div rate-yo rating="myRating"></div>
Code above is untested, but it should give you the gist of it.