How to put angular code in separate files - javascript

If I put this code below in one file it works good but when I separate, then don't work just show blank.In console I get error It can't find MainformCtrl.
Here is how I separated that:
app.js:
angular.module('notifications',['yaru22.angular-timeago','ngRoute'], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
angular.module('commentsApp',['notifications']);
angular.bootstrap(document.getElementById("comment"), ['commentsApp']);
commentsController.js
angular.module('commentsApp')
.controller('CommentsCtrl',function($scope,$http,$routeParams){
$scope.param = $routeParams.id;
$http.get("/api/comments/"+ $scope.param)
.success(function(data){
var details = [];
$.each(data,function(index,value){
if(value.user){
$.each(value.user,function(index1,value1){
var new_object = $.extend({}, value, value1);
details.push(new_object);
});
}
});
$scope.formShow = function(comm){
comm.formWhat = !comm.formWhat;
};
$scope.comments = details;
})
.error(function(data){
console.log(data);
});
})
.controller('MainformCtrl',function($scope){
$scope.fwhat = false;
$scope.MainFormShow = function(){
$scope.fwhat = !$scope.fwhat;
};
});
routes.js
angular.module('commentsApp')
.config(function($routeProvider,$locationProvider) {
$routeProvider.
when('/project/:id', {
controller: 'CommentsCtrl',
templateUrl: '/view/comments.html'
}).
otherwise({
redirectTo: '/'
});
//check browser support
if(window.history && window.history.pushState){
//$locationProvider.html5Mode(true); will cause an error $location in HTML5 mode requires a tag to be present! Unless you set baseUrl tag after head tag like so: <head> <base href="/">
// to know more about setting base URL visit: https://docs.angularjs.org/error/$location/nobase
// if you don't wish to set base URL then use this
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
});
Anyone know what is problem here?

Problem was because: module bootsrap. To solve that I deleted this:
angular.bootstrap(document.getElementById("comment"), ['commentsApp']);
from app.js
and added it on the end of controller file, because it is last file.
#Grundy thanks for help!

I've come to this problem too. :)
You just need to import them on your main html file. Don't forget the order of the elements. Here's how your HTML should look.
index.html
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<!-- Here's your html stuff -->
<script src='angular.js'> <script>
<script src='app.js'> <script>
<script src='routes.js'> <script>
<script src='commentsController.js'> <script>
</body>
</html>
Don't forget to import your angular.js before your js files. Your css files should go on the head of the document and any Angular separated module should go right after angular.js. To use the $routeProvider, you need to import the ngRoute module and, to use this module, you need it's specific file. You can find it here or look to your specific version here.
Hope it help. :)

You can use something like Browserify or Webpack to require CommonJS style modules.

Related

AngularJS routeprovider is not called

I've googled a lot of info about routing in AngularJS and have seen questions at stackoverflow, for example, this 1, this 2, this 3, this 4. However, there is no result.
I've included AngularJS 1.5.8.js and angular-route.js.
HTML:
<!doctype html>
<html ng-app="employeesApp">
<head>
<title>Injecting view</title>
</head>
<body >
<p>Hey! View should be injected between these statements</p>
<div ng-view></div>
<p>Hey! View should be injected between these statements</p>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/employeesController.js"> </script>
</body>
</html>
Employees.html:
<h2>Employees</h2>
<article>This is employee view!:)</article
employeesController.js:
(function()
{
var employeesController=function($scope, foo, bar) {//THIS CODE SNIPPET IS NOT CALLED
alert('a1');
debugger;
$scope.sortBy='name';
$scope.reverse=false;
$scope.employees= [
{joined:'2010-12-02', name:'Jon', city:'Reading', orderTotal:49.9956},
{joined:'1995-01-25', name:'Ben', city:'Las Vegas', orderTotal:519.99},
{joined:'1994-06-15', name:'Joseph', city:'New York', orderTotal:344.99},
{joined:'1998-03-18', name:'Adam', city:'Seattle', orderTotal:1021.5}
];
$scope.doSort=function(propName){
$scope.sortBy = propName;
$scope.reverse=!$scope.reverse;
};
};
employeesController.$inject=['$scope'];
angular.module('employeesApp',[]).controller('employeesController',
employeesController);
}());
app.js:
(function() {
debugger; //this code snippet works
var app=angular.module('employeesApp',['ngRoute']); //this code snippet works
app.config(function($routeProvider){ //THIS CODE SNIPPET IS NOT CALLED
alert('in');
debugger;
$routeProvider
.when('/', {
templateUrl: 'app/views/employees.html',
controller: 'employeesController'
})
.otherwise( { redirectTo: '/' });
});
}());
I double checked all directives and code, however employee.html is not injected.
Does anybody know what I am doing wrong? I am using AngularJS 1.5.8.js.
The only problem i see is you are redefining employeesApp in your controller
angular.module('employeesApp', []).controller('employeesController', employeesController);
Omit the [] part
angular.module('employeesApp').controller('employeesController', employeesController);
You only define your modules once. Using angular.module('modulename', arrayofdependencies or empty array)
Everywhere else you just get the module and add parts, i.e. Controllers, directives etc, using getter syntax. Do not use array here. angular.module('modulename').controller

Uncaught Error: [$injector:modulerr] - AngularJS not working

I am trying to implement Modal popup on an image click by using Bootstrap Lightbox, but I'm not able to achieve the same. I followed an example which has identical code as below. I have downloaded the Lightbox components(*.lightbox.js and *.lightbox.css) and placed in the directory where my below HTML file resides. Can someone please help me out in fixing this issue.
<!doctype html>
<html ng-app="myApp">
<head>
<title>Sandesh</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="angular-bootstrap-lightbox.js"></script>
<link rel="stylesheet" href="angular-bootstrap-lightbox.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
</head>
<body ng-controller="GalleryCtrl">
<ul>
<li ng-repeat="image in images">
<a ng-click="openLightboxModal($index)">
<img ng-src="{{image.thumbUrl}}" class="img-thumbnail">
</a>
</li>
</ul>
<script>
var app = angular.module('myApp',['bootstrapLightbox'])
.controller('GalleryCtrl', function ($scope, Lightbox) {
$scope.images = [
{
'url': '9RyWebbb.jpg',
'thumbUrl': 'Thumb_9RyWebbb.jpg'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
});
</script>
</body>
</html>
First, confirm that the name of the modu:le is "bootstrapLightbox". If it actually is, import it in the module via:
var app = angular.module('myApp',['bootstrapLightbox']);
Determine if you want to define controllers, services and directives against the variable, or against the methods:
var app = angular.module('myApp',['bootstrapLightbox']);
app.controller('GalleryCtrl', function ($scope, Lightbox) {
// etc
});
or
angular.module('myApp',['bootstrapLightbox'])
.controller('GalleryCtrl', function ($scope, Lightbox) {
// etc
});
Then, this maybe is less important, but a good tip to show: if you use some object only inside your JS code, without affecting directly the DOM, better use plain variables instead of declaring them on the $scope. Here, you use $scope to declare an array or "image" objects, but then only use it inside your lightbox instead of directly using it in the DOM.
So, I'd turn this...
$scope.images = [
{
'url': '9RyWebbb.jpg',
'thumbUrl': 'Thumb_9RyWebbb.jpg'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
... into this:
var images = [
{
'url': '9RyWebbb.jpg',
'thumbUrl': 'Thumb_9RyWebbb.jpg'
}
];
$scope.openLightboxModal = function (index) {
Lightbox.openModal(images, index);
};
I hope it was useful for you!
Problem solved on including additional files as mentioned below:
<!doctype html>
<html ng-app="myApp">
.....
<link rel="stylesheet" type="text/css" href="ui-bootstrap-csp.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
....
....
</html>
Also note that the order in which we include these files also matters; for example in this case the pop-up functionality doesn't work if we add 'ui-bootstrap-tpls.min.js' before 'ui-bootstrap.min.js'
Anyways thanks all for your valuable suggestions :)..cheers!

Use Coldfusion query resultset in AngularJS

I'm trying to use AngularJS in my cfm files to display data from cfquery resultset.
I used below code in my cfm file.I'm not able to see any output.
P.S. I'm really new to AngularJS. So if anyone can please help me out here it would be great.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html ng-app="Demo">
<head>
<link rel="stylesheet" href="/Applications/_Common/style.css" type="text/css">
</head>
<body>
<cfsetting enablecfoutputonly="Yes">
<CF_GetProjectData project_number=349246 query_name="GetProject">
<div ng-controller="DemoController">
<div ng-repeat="number in project">
{{number.project_number}} - {{number.project_name}}
</div>
<!-- <input name="imprint" type="text" size="10" ng-model="first">
<p>{{first}}</p> -->
</div>
<cfoutput>
<script language="JavaScript" src="/CFIDE/scripts/wddx.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script language="text/javascript">
var theProjectArray; < cfwddx action = "CFML2JS"
input = "#GetProject#"
toplevelvariable = "theProjectArray" >
</script>
<script>
var Demo = angular.module("Demo", []);
Demo.controller("DemoController", function($scope) {
$scope.project = theProjectArray;
alert(theProjectArray);
});
</script>
</cfoutput>
<cfsetting enablecfoutputonly="No">
</body>
</html>
I am not sure about Angular.js but based on the code you have posted, it seems, you need to wrap ng-controller div in cfoutput. This is because you have set enablecfoutputonly="Yes". So only the content inside cfoutput will be rendered.
I'm a CF developer that's currently learning Angular as well. First of all Angular is a MVC framework and will work for you best of you follow the rules of Separation of Concern (SoC). I know unless you are using Object Relational Mapping (ORM) in CF this is counter intuitive but it will save you so much hassle and trouble shooting later.
For your problem right now though i would
combine both script blocks.
your variable theProjectArray is defined with var so it's not
global. Are you sure it's making it into your controller?
the line toplevelvariable = "theProjectArray" > ... is the greater
than sign a type-o?
After you've done those i would console.log(theProjectArray); right after it's defined. Then console.log(theProjectArray); again in your controller to ensure it's getting passed in properly.
Just for your reference here is a very basic example of a controller and a factory in angular calling a CFC. Since i've been doing things this way the only time i use ColdFusion is to retrieve data and model it. It's simplified my code and logic quite a bit and has allowed me to do a lot more now that i'm not leaning on ColdFusion.
var myapp = angular.module("test.myapp", [])
myapp.controller("MyController", function($scope, getevent) {
$scope.myData = {};
$scope.myData.doUpdate = function(item, event) {
getevent.GetProgram(item).success(function(data, status, headers, config) {
console.log(data.DATA);
$scope.test = data.DATA;
$scope.test.DATE = new Date(data.DATA.DATESTART);
});
getevent.GetProgram(item).error(function(data, status, headers, config) {
console.log("FAILED: "+item);
alert("AJAX failed!");
});
}
});
myapp.factory('getevent', function($http){
return {
GetProgram: function(item) {
var programInfo = '/foundation/cfc/calendar.cfc?method=getevent&eventid='+item;
return $http.get(programInfo);
}
};
});

Preload an angular route for instant viewing

I am relatively new to angular and here is what I am trying to do:
I am trying to pre-compile angular templates into a view so that they can be shown instantaneously when the navigation event to the view occurs.
I am trying mock some kind of a navigation controller behavior for my app where the views preload or stack up and don't show in the SPA until their routes are active.
I did some research and $templateCache might not be something that would work for me since it seems to be only prefetching the template, viz. the uncompiled view (as per my limited understanding of angular), but what I am looking for is the "compiled version"; that is, the result of a $scope applied to a template.
Currently, the app's templates and controllers are linked through $routeProvider and ng-view constructs.
Minimal code skeleton:
JS:
var app = angular.module('airfiApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/home.html',
controller: ''
})
.when('/shop', {
templateUrl: 'views/shop.html',
controller: 'ShopController'
})
.otherwise({
redirectTo: "/index.html"
}))
});
app.controller('ShopController', ['ImageFetchService', function(ImageFetchService) {
ImageFetchService.get().then(function(images) {
$scope.images = images;
});
}]);
app.factory('ImageFetchService', ['$q', '$http', function($q, $http) {
var def = $q.defer();
//basically get product docs with id products:name-of-product
var couchdbURL = 'http://username:password#localhost:5984/db_name/_all_docs?startkey="products"&endkey="products\uffff"';
$http.get(couchdbURL).then(function() {
//do some processing and send back array of objects called 'images'
/* images =
[
{
... product information... ,
src: http://couchurl/db_name/product1/attachment_name
},
{
... product information... ,
src: http://couchurl/db_name/product2/attachment_name
}
.
.
.
]
*/
def.resolve(images)
});
}]);
HTML:
//index.html
<!DOCTYPE html>
<html>
<head>
<script src="/Scripts/angular.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<!-- some home page html -->
<section ng-view> </section>
</body>
</html>
//shop.html
<div ng-repeat = " img in images">
<img ng-src="img.src" alt="img.productName" />
</div>
I really don't think you need to compile the template manually - angular will do this for you. If you really insist, you can compile any template against any scope using $compile:
$compile( element.contents() )( scope );
What I really think you're after is loading of inline template. This question shows how it is done.
A couple things you can do to easily speed up how fast a view is rendered, first thing is you can pre-load the data by calling a pre-load method in a service, during the run phase of the App. Example
//service that has a preload function that stores an http result in memory
app.service('myService', function($http){
var data;
this.getData= function(){
return $http.get('dataUrl')
.success(function(data, status, headers, config) {
return data;
})
};
// calls get data and stores result in memory
this.preloadData = function(){
this.getData().then(function(data){
data = data;
});
};
// returns in memory result
this.getPreloadedData = function(){
return data;
};
});
// call preload in run block
app.run(function(myService){
// preloads data from service
myService.preloadData();
});
// get data from in memory
app.controller('TestCtrl', function($scope, myService) {
$scope.data = myService.getPreloadedData();
});
The second thing you can do is store the template in $template cache rather than fetching it form a http request, you can do this in the run block as well, and if you using gulp or grunt there are some great plug ins that provide a better way of doing this
app.run(function($templateCache){
// cache template
var tempalate = '<h2>hello world</h2>'
$templateCache.put('test.html', tempalate);
});
here is a plunk that goes into better detail and shows more examples
http://embed.plnkr.co/DSeWLVNoV2Fe0SJI3Bwa/preview
This does exactly preload the route but it will help performance :)

adding module not working

I am still in study mode of angularjs and just 2 day old. I was trying to make module and so i created seperate js file for it and created module like below.
Also added controller.
var app = angular.module("githubViewer", []);
app.controller("MainCtrl", MainCtrl);
But when i run i get error 'MainCtrl' is not a function, got undefined
here is Plunker
Can someone help me?
After looking in plunker,I think you want to create a separate module in separate file for your controllers and add it to your main module.
For that create module for controllers in separate file,
angular.module("githubViewer", [])
.controller('MainCtrl', function($scope,$http) {
//your logic
});
then add it to your main as dependency in main module
angular.module('plunker', ['githubViewer']);
here is working demo : http://plnkr.co/edit/T9p7Uo2DxUVjqS1wuuiA?p=preview
Ok, you're new to angular, so here's a couple of rules which you must follow until you can prove you need to do otherwise.
You can place definition of module in a separate file. In short plunkers it is often an overkill, but that's what you should be doing in realworld-sized apps. Note that I'm talking about only the module here. Not talking about controllers, factories and other stuff.
Separating body of controller from its inclusion into angular does not bring any benefit. Don't do that.
That said, your files should look like this:
# my_app.module.js
angular.module('myApp', []);
# main.controller.js
var app = angular.module('myApp')
app.controller('MainCtrl', MainCtrl);
function MainCtrl() {
// logic here
}
I check your Plunker.
here is Working Plunker as you want logic of controller in seperate js file and module in seperate file
app.js
function MainCtrl($scope,$http) {
var person = {
firstName: "Kiran",
lastName: "Nandedkar"
};
$scope.name = 'World';
var onUserComplete = function(response){
$scope.user = response.data;
}
var onError = function(reason){
$scope.error = "dfdfdf" ;
}
$http.get("https://api.github.com/users/odetocode")
.then(onUserComplete,onError);
$scope.person = person;
};
module.js
var app = angular.module("githubViewer", []);
app.controller("MainCtrl", MainCtrl);
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
<script src="app.js"></script>
<script src="module.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{person.firstName}}!</p>
<div>Login : {{user.login}}</div>
</body>

Categories

Resources