Как импортировать Angular 1.x в TypeScript?

Question

[Partizanin]

Подскажите как правильно подружить тайпскипт с первым ангуларом, когда пытаюсь импортировать пишет что не может этого сделать,компиляция тоже не получается.

import * as angular from '@types/angularjs';


let app = angular.module("myAppTest", []);


app.controller("myController", function ($scope, $http, $q) {
    $scope.testValue = "Hello From Angular";
});

Answer 1

[Константин Китманов]

Глупый вопрос, а делать как оно советует (import * as angular from 'angularjs') не пробовали?

Comments

[Partizanin]

Действительно, спасибо, очень помогли!

[Partizanin]

Не подскажешь еще раз,что ему не нравиться ?
После компиляции ts файла выдает такую

Ошибку

[Константин Китманов]

Partizanin, я сталкивался с похожей проблемой и оказалось, что на уровень выше есть еще один package.json, в котором установлена эта же библиотека (точнее, тайпинги к ней). Я бы искал дубликаты, npm ls @types/angular.

[Partizanin]

Константин Китманов, Дубликатов не нашел, все по одному экземпляру показывает, один @types/angularи один @types/angularjs.

Может у тебя есть рецепт как подключить первый ангуляр к тайпскрипту ?

[Константин Китманов]

Partizanin, мне кажется, должен быть один из них, либо @types/angular либо @types/angularjs (скорее второе).
Рецепта нету, увы.

[Partizanin]

Константин Китманов, ну как это нет, как все это делают, как бы вы это сделали ?

[Константин Китманов]

Partizanin, "слы, есть сетап для вебпака? А если найду?":)
Я бы начал с npm install typescript angularjs @types/angular --save, а если не получается, то пошел бы гуглить бойлерплейт.
Я боюсь что сейчас уже никто не начинает проекты с первым ангуляром.

[Partizanin]

Partizanin, Константин Китманов, Удалось подружить ангулар с тайп-скриптом, с вот таки конфигом

package.json

{
  "name": "someProject",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack -w",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "angular": "^1.6.2",
    "angular-ui-router": "^0.4.2"
  },
  "devDependencies": {
    "@types/angular": "^1.6.5",
    "@types/angular-ui-router": "^1.1.36",
    "@types/node": "^7.0.5",
    "ts-loader": "^2.0.0",
    "typescript": "^2.1.6",
    "webpack": "^2.2.1"
  }
}

main.js

/**
 * Created by Partizanin on 20.09.2016.
 */

var app = angular.module("converterApp", []);


app.controller("converterController", function ($scope, $http, $q) {
    /*start create function*/


    $scope.callToServer = function (request) {
        $scope.showLoader();

        var deferred = $q.defer();

        var myData = {"operationCall": request};

        $http({
            url: '/ConventerServlet',
            method: 'GET',
            params: {jsonData: JSON.stringify(myData)}
        }).success(function (data) {

            $scope.showLoader();

            deferred.resolve(data);

        });

        return deferred.promise;
    };

    $scope.showLoader = function () {
        $scope.loaderStatus = !$scope.loaderStatus;
    };

    $scope.buttonClick = function () {

        $scope.buttonDisable = !$scope.buttonDisable;

        console.log("buttonClick " + $scope.buttonDisable);

    };


    $scope.selectExchange = function () {

        $scope.changeCourse($scope.selectedExchangeValue + "/" + $scope.selectCourseValue);
        console.log("selectedExchange: " + $scope.selectedExchangeValue);
    };

    $scope.selectCourse = function () {

        $scope.changeCourse($scope.selectedExchangeValue + "/" + $scope.selectCourseValue);


        console.log("selectCourse: " + $scope.selectCourseValue);
    };

    $scope.changeCourse = function (request) {

        $scope.callToServer(request).then(function (data) {
            $scope.rows = data.rows;
            if (data.id) {
                $scope.selectedExchangeValue = data.id;
            }
            /** @namespace data.optionsCourse */
            if (data.optionsCourse) {
                $scope.optionsCourses = data.optionsCourse;
            }
            /** @namespace data.optionsValute */
            if (data.optionsValute) {
                $scope.optionsValutes = data.optionsValute;
            }
        });

    };

    /*end create function*/

    /*start initialize variable*/

    $scope.inputValue = 1;
    $scope.selectedExchangeValue = "UAH";
    $scope.selectCourseValue = "Google";
    $scope.buttonDisable = true;
    $scope.rows = {};
    $scope.optionsCourses = {};
    $scope.optionsValutes = {};

    /*end initialize variable*/

    /*start working area*/

    $scope.changeCourse("load");

    /*end working area*/


});

Теперь не могу сообразить как создать контроллер с $scope, $http, $q и работать с ними, например как создать переменную в скоуп или метод, как указано выше. Может сможете подсказать ?

[Константин Китманов]

Partizanin, к сожалению, первый angular использовал полтора года назад, и без TS, так что не подскажу.

[Partizanin]

Константин Китманов, Ах, жаль,тогда такой вопрос, есть проект на ангуларе 1 и в нем js файл настолько разросся, что уже не комфортно работать, и было принято решение переходить на тайпскрип, но к сожалению первый ангуляр с тайпом не очень хочет дружить, какие в этой ситуации есть варианты решение, только переходить на второй ангуляр или еще что-то можно сделать ?

[Константин Китманов]

Partizanin, то есть вы просто хотите разбить на файлы? возьмите любой бандлер, сейчас популярный выбор webpack, так же на хабре недавно были статьи про systemjs. можно посмотреть на parceljs или rollup.

[Partizanin]

Константин Китманов, Ну не только, конечно же работать с классами методами...

[Константин Китманов]

Partizanin, для этого typescript тем более не нужен:)

[Partizanin]

Константин Китманов, Ну да то-есть нужно переходить на второй ангуляр, я понял, спасибо, буду пробовать мигрировать с первого на второй )

[Константин Китманов]

Partizanin, я этого не говорил. Но да, старый ангуляр ужасен.

[Partizanin]

Константин Китманов, Здравствуйте, подскажете в чем проблема, вот вопрос Почему не отправляется http.put запрос angular 5?