In my angular js application we are using ui-router for routing. Currently we placed all controllers are placed in external js files and this js files are included in index.html file, but as per performance wise application loading very slow.
If we are declaring controllers in html files showing error like undefined controller. can any one help this issue.
here is the code
<script>
angular.module('testApp').controller('TestCtrl1', function ($scope,$http,$stateParams) {
$scope.test = "test sample";
});
<div class="container-fluid" style="min-height:595px;" ng-controller="TestCtrl1">
<h1>{{test}} page</h1>
Related
I was tasked with adding some new features to an old system built with AngularJS. I'm a backend developer so I don't know js frameworks in deep but I have mostly figured out how Angular JS works, however I'm stuck with some html templates in components. The documentation shows an identical example of what I'm facing.
In a file called index.js I have
angular.module('heroApp', []).controller('MainCtrl', function MainCtrl() {
this.hero = {
name: 'Spawn'
};
});
I have another file called heroDetail.js containing
angular.module('heroApp').component('heroDetail', {
templateUrl: 'heroDetail.html',
bindings: {
hero: '='
}
});
An html file called index.html
<div ng-controller="MainCtrl as ctrl">
<b>Hero</b><br>
<hero-detail hero="ctrl.hero"></hero-detail>
</div>
And finally a file called heroDetail.html
<span>Name: {{$ctrl.hero.name}}</span>
My question is, how is the <hero-detail></hero-detail> tag generated? There seems to be no definition for it in the files nor in the entire project.
here:
.component('heroDetail'
lower camel case goes to kebab case for the tag.
for example .component('myHeroDetail' would result in <my-hero-detail>
One of the many weird quirks of angularjs that was improved upon in angular 2.
I am new to angular js. I have downloaded ui-grid.js and ui-grid.css to implement ng-grid in our existing angular js project. I have added the path for both of them in Index.html like below.
<link href="app/assets/vendor/css/ui-grid.css" rel="stylesheet" />
<script src="app/assets/vendor/scripts/ui-grid.js"></script>
But when I try to use it in tPController.js file like below, the page is not loading, application itself is not coming up.
(function () {
angular.module('dApp',['ui.grid']).controller('tPController', function ($timeout, $scope) {
var vm = this,
---------------
});
})();
Note that i have not yet started using ng-grid in the html file. Only using ['ui.grid'] in .js file is causing the issue.
In the following piece of code, I create a simple controller that does not get instantiated.
var app = angular.module('newstalk',[]);
app.controller('articlectrl',[function(){
console.log("hi");
}]);
The corresponding HTML for it is this:
<html ng-app='newstalk'>
<!-- I have also included both angular js file and my js file in html-->
<body ng-controller='articlectrl'></body>
</html>
The string hi is not getting logged.
I am very new in angularJs please guide me ,i have created custom directive called testDirective in separate file and my controller and config files are in separate files i want to use my custom directive in my html page but while loading the application that custom element is loading but not able to fetch content of directive i guess m missing some sort of mapping .kindly help me
//this is testDirective.js
var app=angular.module('mytodoApp');
app.directive('testDirective',function(){
return {
restrict:'E',
template:'<h2>This is comes from directive</h2>'
};
});
var app=angular.module('mytodoApp');
app.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
});
< test-directive>
< /test-directive>
You have to bootstrap the Angular app, otherwise the HTML page does not know that you are using AngularJS and what you app has.
Bootstrapping is done by using ng-app="moduleName".
<div ng-app="mytodoApp">
<test-directive></test-directive>
</div>
As said by #JBNizet, you should add your custom directive code, by adding it trough the script tag in your HTML code.
Since browsers can only load 5 to 10 scripts at the same time, it is nessesary in production to concatenate your files with Grunt or Gulp.
Hello im working on a web app project, and we are using jquery mobile for the pages ui and angular for mvc reasons,
Im having a problem using my external pages ( pages that ive load to my index.html), they dont recognize my controllers (only works the controllers that ive put in the index.html)
ill some of my code here to explain my problem
if ive put some angular values in my external page (previews declaration of the controller in my
<div data-role="page" id="ResEjecSuc" class=".paginas"
data-dom-cache="true" ng-controlles="categController" >
)
<span ng-class="sucursal.TIT_CATEGORIZACION">
{{sucursal.TIT_REALIZADA}}</span>
my app only shows: {{sucursal.TIT_REALIZADA}}
my controller init code :
app = angular.module('nevadaProt', [])
app.controller('categController', controlerCateg)
controlerCateg = function($scope, $locale) {
var sucursal = {
TIT_CATEGORIZACION:4,
TIT_REALIZADA:12
}
how ive load and after that transition to my html page:
Load:
$.mobile.pageContainer.pagecontainer("load",
"pages/RappidApps2/ResumenEjecZona.html", {});
transition:
$.mobile.pageContainer.pagecontainer("change", "#ResEjecSuc", {
transition : "pop",
reverse : false
});
how can i make work angular controllers and external jquery mobile pages?
Once you are using Angular, you may create a directive.
app.directive('externalHtml', function(){
return {
restrict : 'E'
,replace : true
,templateUrl : 'pages/RappidApps2/ResumenEjecZona.html'
};
});
then, you html should be something like:
<body>
<div data-role="content">
<external-html/>
</div>
</body>
It always works for me.