I'm geting problems with angularjs structure. I pretend to have a translation controller or service or wathever and one controller per group of pages (I will explauin that point).
The idea is an index page that loads all the .js files and .css (that are global on the entire web site). That page will load the login file (in it´s body), with its angular controller. Then it will load a template with nav, header, footer, etc... templates, and in the article section I pretend to load diferent pages (links in the nav menu) each page (or group) with its controller. I'm starting with angularjs and it doesn't works. The idea will be similar at next code:
index (reduced for the example):
<!DOCTYPE html>
<html **ng-app="app" ng-controller="translationsCtrl"**>
<head>
<title>something</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!--GLOBAL STYLES (WILL BE MORE, ONLY EXAMPLE)-->
<link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div ng-controller="loginCtrl" ng-include="'views/login.html'"></div>
<!--GLOBAL SCRIPTS (WILL BE MORE, ONLY EXAMPLE)-->
<script src="assets/libs/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="controllers/translationsCtrl.js"></script>
</body>
</html>
in login.html it will be like this:
<!--STUFF-->
<script src="controllers/loginCtrl.js"></script>
controllers will be:
loginCtrl.js:
angular
.module('app', [])
.controller('loginCtrl', function($scope) {
$scope.login = 'login';
})
translationsCtrl.js
angular
.module('app', [])
.controller('translationsCtrl', function($scope) {
$scope.text = 'text';
});
how can I do something similar working? Are there any better method for doing it? The web app is to huge so I can't use requirejs or simplepage angular.
Related
I have a simple angular-cli app consisting of only one component (app.component). I have created one custom build-script.js which I use to merge all the files (.js and .css) created using ng build --prod. So I get only two files in my dist folder (Index.html and ng-app.js).
I have another static website with just two files index.html and script.js. Now I want to load my compiled Angular app as a widget inside this static app. I am trying to encapsulate the Angular app inside web component (shadow dom) so that it will not mess with the parent static app and can be loaded as a widget.
static app index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Widget App</title>
</head>
<body>
<!-- custom web component Widget holding angular app -->
<ng-widget></ng-widget>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
script.js:
window.customElements.define('ng-widget', class extends HTMLElement {
constructor() {
super();
var shadowRoot = this.attachShadow({
mode: 'open'
});
shadowRoot.innerHTML =
`
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>NgWidget</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
<!-- The ng-app.js is not getting download since it is inside shadow dom -->
<script type="text/javascript" src="./ng-app.js"></script>
</body>
</html>
` } });
Now since the link to ng-app.js is inside shadow dom, it is not getting downloaded and my Angular app is not bootstraping.
What is the best way to render a Angular app as a widget inside a static website?
This is mine html file.
<!DOCTYPE html>
<html lang="en">
<head ng-app="drawings">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script><!-- load jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->
<script src="https://cdn.jsdelivr.net/npm/lodash#4.17.5/lodash.min.js"></script>
<script src="drawings_core.js"></script>
</head>
<body ng-controller="mainController">
</body>
</html>
This is mine drawings_core.js file.
var app = angular.module('drawings',[]);
var drawing;
function mainController($scope,$http){
$http.get('/get_drawing').success(function(data){
console.log(data);
}).error(function(err){cosnole.log(err);});
}
Content of mainController function wont't get called.
Get request is not sent.
You need to register your controller in your application. The code could look like this, but this is not tested, you might need to make some small alterations.
I would suggest creating separate methods for your functionality. You can then call them like I did in this example.
Even better would be to create a separate service where you deal with the http stuff.
I have an example here: https://eidand.com/2015/01/22/starting-with-angular-part-3-services/
It's old, but it should be enough to get you started.
app.controller(mainController, ['$scope', '$http', function ($scope, $http) {
$scope.getDrawing = function ()
{
$http.get('/get_drawing').success(function(data){
console.log(data);
}).error(function(err){console.log(err);});
}
$scope.getDrawing();
}]);
})();
I integrate an angularjs app in my CRM 365 as a web ressource type HTML then i add the Canuular controller as a web ressource type javascript and add his dependency in my html view the issue is that my controller isn't loded
is there a specifiq configuration in CRM for angularjs developpment
there is my code HTML:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
**<script src="tit_releveDeCompteurPourTableauDeBordAngularController" type="text/javascript"></script>**
<script src="tit_releveDeCompteurPourTableauDeBordAnularService" type="text/javascript"></script>
<title>titleTest</title>
</head>
<body ng-controller="TestController">
<div class="container" style="font-family: undefined;">
<h1>xxxxxxxxx</h1>
</div>
</body></html>
and my controller is like bellow :
var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
app.controller('TestController',['$scope', 'serviceFactory', function ($scope, serviceFactory) {
debugger;
alert("TestController");
$scope.name = "nametest";
}]);
You have not defined an ng-app in your html.
Please add ng-app to your body or div or ... like this:
<body ng-app="ngAppDemo">
ng-app tells angular where it should be active on your page.
I'm developing a web app with AngularJS for the frontend and i'm trying to set the routing and showing the views, so far even ng-include and other stuff work for me but not ng-view
I'm developing in visual studio and when i run the app it's using a local server (localhost)
here's my directory structure
- ASP.NET project
---- Css
---- Scripts
-------- App
-------- app.js
----------- Home
-------------- Controllers
------------------ index-controller.js
---- Views
------- Partials
---------- navbar.html
------- home.html
- index.html
Here's mi index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scolaris</title>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="Content/materialize/css/materialize.css" media="screen,projection" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body ng-app="app_module">
<ng-include src="'Views/Partials/navbar.html'"/>
<div ng-view></div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Content/materialize/js/materialize.js"></script>
<script type="text/javascript" src="Scripts/angular.js"></script>
<script type="text/javascript" src="Scripts/angular-route.js"></script>
<script type="text/javascript" src="Scripts/App/app.js"></script>
<script type="text/javascript" src="Scripts/App/Home/Controllers/index-controller.js"></script>
<script type="text/javascript" src="Scripts/initialization.js"></script>
</body>
</html>
Here's my app.js
'use strict';
var app_module = angular.module('app_module', ['ngRoute']);
app_module.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/Views/home.html',
controller: 'indexController'
})
.otherwise({
redirectTo: '/'
});
}]);
/* tried with ../../Views/home.html, ../Views/home.html, etc and nothing */
When i load the site it loads correctly and if i see the requests i can clearly see that it's requesting the home.html with 304 status code, the thing is the div with ng-view is not showing the html inside home.html, what could this be due to?
I've solved the issue by changing the <ng-include> tag with an <div ng-include="srctoview"> tag. If anyone is having this issue i'd recommend doing this, or doing it like in this answer using a controller
Thanks to #Sourabh- for leading me to an answer.
close <ng-include> directive properly as browser is wrapping ur <ng-view> inside of <ng-include>. it will solve the problem. as #pankaj has already suggested.
I have a main page with this structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>..:: Test Application ::..</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
function loadOption(idopt){
if(idopt==1){
var curl = '../view/otherpage.php'
}
$("#mainContainer").load(curl);
}
</script>
<body onLoad=loadOption(<?php echo idopt;?>)>
<div id="mainContainer"></div>
</body>
</html>
otherpage.php
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
But, when i load the main page... the AngularJS doesn't run. What could be wrong?
That's because you're loading otherpage.php after the DOMContentLoaded event has finished.
In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.
So in order to get it to work, you'll have to manually bootstrap Angular.
Here's Angular's documentation about it:
http://docs.angularjs.org/guide/bootstrap
Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.
Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.
We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...
make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page