I have a project written in angular 1.x according this template by John Papa:
https://github.com/johnpapa/ng-demos/tree/master/modular.
Basically i use a gulp to build a minified js for production and another task (called 'index') that injects all the js src files (without minification) into the index.html file.
How should I change things now when adding typescript to my project?
specifically, my issue is when I have a class B which inherits from class A and they both on the same namespace.
how can I make sure that in the minified js file or in the index.html injection the order of the classes will be according the dependencies?
Note also this issue that I've opened for another template, a one that shows how to use typescript with Angular - https://github.com/johnpapa/hottowel-angular-typescript/issues/24
Many thanks!
Related
I have an angular 1.6.x project being served up by a MVC project. When I hit save on any ts file, it transpiles my javascript as expected. When I build the site it transpiles the javascript into a different format from when I save.
On build, the angular modules are moved into an order which causes an angular $injector error.
How can I make build transpile method the same as the save transpile?
These are the typescript build settings within the MVC project properties:
For every typescript file in your project there is a line in your proj file which looks like this:
<TypeScriptCompile Include="app\app.ts" />
Somehow my app.ts include was placed towards the bottom of the xml of my proj file. The build transpile method uses the order of your TypeScriptCompile include statements, whereas the transpile on save method is apparently a little more intelligent about re-ordering.
Life can move forward now...
I have been an Angular1 developer and recently considering using Angular4 for a new web application project.
With Angular1, I used to purchase an 'Bootstrap Admin Theme' which came with well done and consistent CSS and a lot of JS plugins put together which allowed me to focus on the application itself. I used to insert Angular1 code into it in the areas where there was data manipulation and I enjoyed doing that. So I had the best of both worlds.
Is there any way, this could be achieved in Angular2/Angular4, 1) without really missing out the JS plugins the Theme offers and 2) without having to copy the CSS everywhere ?
Yes it is possible but you will have to do 'some' tweaking.
Template
First of all import all your js plug-ins through npm
npm install (plug in) --save
Then you will have to edit your angular-cli.json to include js plug-ins (js & css)
"styles": ["styles.css"],
"scripts": [],
Put the path to styles & scripts in to array
Then you should add main template css file in to predefined styles.css
Next you should break up your pages in to components (view components and 'tag' components).
Now about custom app dev:
Add your custom
- js in to *.component.js
- css in to *.component.css
- html in to *.component.html
(* stands for component name)
et voila...
I am trying to build and app using Angular 2 which has several tabs. I want one of these tabs to be as the already created angular 1.3.17 app. More specifically, I want to embed Netflix Vector into one of my tabs. My Angular 2 app is uploaded here (at the moment does nothing) here. Would this be possible?
I don't intend to have any interaction between the Angular 2 components and Angular 1.x. I simply want to embed it.
I also tried the following:
The way to run Netflix Vector is simply doing a gulp build and then running a simple server inside the dist directory.
So, to ease the way of embedding such a large application, I tried to put the dist directory inside my angular 2 component directory and then just modifying the index.html to remove the inclusion of scripts and css. I loaded those scripts and css through my main index.html.
Then I loaded index.html through my angular 2 component. I have made sure that the angular libraries and all other js files are loaded. However, it doesnt seem to work just by providing a ng-app directive inside index.html
I'm currently working on an Angularjs based project.I am using RequireJs library to load dependencies asynchronously.
Following is my project structure :
index.html
vendors
angular.js
require.js
underscore.js
css
bootstrap.css
app.cs
images
App
app.js
signup
signup.controller.js
api.user.resource.js
user.service.js
templates
Login.html
profile
profile.controller.js
api.myprofile.resource.js
myprofile.resource.js
templates
profile.html
How can I combine all files inside of App folder into a single minifieds app.js file.Please help me to create a Grunt Task
Have a look at https://github.com/jrburke/almond. It is a minimal AMD API implementation designed for use with optimized builds.
For packaging require applications with Grunt use https://github.com/gruntjs/grunt-contrib-requirejs.
I am trying to move avatars pattern of Onsen UI (http://onsen.io/pattern-list_avatars.html) into a Meteor app, but the tags do not load. Firebug logged message from Onsen:
Onsen UI require jqLite. Load jQuery after loading AngularJS to fix this error. jQuery may break Onsen UI behavior.
This message appeared even though I had jquery package installed and in order to eliminate it I have to include jquery lib into client/lib folder (do not know if that is correct).
I have also added urigo:angular package into my project because Onsen requires Angular but that did not do the trick. Now the only message I get in the log is
WARNING: Tried to load angular more than once.
Which is taken from Onsen code:
if (window.angular.bootstrap) {
//AngularJS is already loaded, so we can return here...
console.log('WARNING: Tried to load angular more than once.');
return;
}
The styling is not applied to elements and they look the following:
How can I solve this?
Onsen .js files need to be loaded in a correct order together with jQuery file and Angular file. To achieve this in Meteor I loaded these files in client/lib folder like this:
root
|- client
|- lib
- onsen.js
|- jQuery
- jquery.min.js
|- Angular
- angular.min.js
Loading in this way solved the problem because meteor load files starting from the deepest node in the folder tree, in this case /Angular folder.
Maybe a better solution will be to create an onsen Meteor package and make a dependency to Jquery and Angular Meteor packages.